extract-and-length.less 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147
  1. 
  2. // test late parsing
  3. @cols: 1, 2;
  4. .a(@i: length(@cols)) when (@i > 0) {
  5. @divider: e(extract(@cols, @i));
  6. }
  7. .a;
  8. .b(@j: 1) when (@j < length(@cols)) {
  9. @divider: e(extract(@cols, @j));
  10. }
  11. .b;
  12. // simple array/list:
  13. .multiunit {
  14. @v: abc "abc" 1 1px 1% #123;
  15. length: length(@v);
  16. extract: extract(@v, 1) extract(@v, 2) extract(@v, 3) extract(@v, 4) extract(@v, 5) extract(@v, 6);
  17. }
  18. .incorrect-index {
  19. @v1: a b c;
  20. @v2: a, b, c;
  21. v1: extract(@v1, 5);
  22. v2: extract(@v2, -2);
  23. }
  24. .scalar {
  25. @var: variable;
  26. var-value: extract(@var, 1);
  27. var-length: length(@var);
  28. ill-index: extract(@var, 2);
  29. name-value: extract(name, 1);
  30. string-value: extract("string", 1);
  31. number-value: extract(12345678, 1);
  32. color-value: extract(blue, 1);
  33. rgba-value: extract(rgba(80, 160, 240, 0.67), 1);
  34. empty-value: extract(~'', 1);
  35. name-length: length(name);
  36. string-length: length("string");
  37. number-length: length(12345678);
  38. color-length: length(blue);
  39. rgba-length: length(rgba(80, 160, 240, 0.67));
  40. empty-length: length(~'');
  41. }
  42. .mixin-arguments {
  43. .mixin-args(a b c d);
  44. .mixin-args(a, b, c, d);
  45. .mixin-args(1; 2; 3; 4);
  46. }
  47. .mixin-args(@value) {
  48. &-1 {
  49. length: length(@value);
  50. extract: extract(@value, 3) ~"|" extract(@value, 2) ~"|" extract(@value, 1);
  51. }
  52. }
  53. .mixin-args(...) {
  54. &-2 {
  55. length: length(@arguments);
  56. extract: extract(@arguments, 3) ~"|" extract(@arguments, 2) ~"|" extract(@arguments, 1);
  57. }
  58. }
  59. .mixin-args(@values...) {
  60. &-3 {
  61. length: length(@values);
  62. extract: extract(@values, 3) ~"|" extract(@values, 2) ~"|" extract(@values, 1);
  63. }
  64. }
  65. .mixin-args(@head, @tail...) {
  66. &-4 {
  67. length: length(@tail);
  68. extract: extract(@tail, 2) ~"|" extract(@tail, 1);
  69. }
  70. }
  71. // "multidimensional" array/list
  72. .md-space-comma {
  73. @v: a b c, 1 2 3, "x" "y" "z";
  74. length-1: length(@v);
  75. extract-1: extract(@v, 2);
  76. length-2: length(extract(@v, 2));
  77. extract-2: extract(extract(@v, 2), 2);
  78. &-as-args {.mixin-args(a b c, 1 2 3, "x" "y" "z")}
  79. }
  80. .md-cat-space-comma {
  81. @a: a b c;
  82. @b: 1 2 3;
  83. @c: "x" "y" "z";
  84. @v: @a, @b, @c;
  85. length-1: length(@v);
  86. extract-1: extract(@v, 2);
  87. length-2: length(extract(@v, 2));
  88. extract-2: extract(extract(@v, 2), 2);
  89. &-as-args {.mixin-args(@a, @b, @c)}
  90. }
  91. .md-cat-comma-space {
  92. @a: a, b, c;
  93. @b: 1, 2, 3;
  94. @c: "x", "y", "z";
  95. @v: @a @b @c;
  96. length-1: length(@v);
  97. extract-1: extract(@v, 2);
  98. length-2: length(extract(@v, 2));
  99. extract-2: extract(extract(@v, 2), 2);
  100. &-as-args {.mixin-args(@a @b @c)}
  101. }
  102. .md-3D {
  103. @a: a b c d, 1 2 3 4;
  104. @b: 5 6 7 8, e f g h;
  105. .3D(@a, @b);
  106. .3D(...) {
  107. @v1: @arguments;
  108. length-1: length(@v1);
  109. extract-1: extract(@v1, 1);
  110. @v2: extract(@v1, 2);
  111. length-2: length(@v2);
  112. extract-2: extract(@v2, 1);
  113. @v3: extract(@v2, 1);
  114. length-3: length(@v3);
  115. extract-3: extract(@v3, 3);
  116. @v4: extract(@v3, 4);
  117. length-4: length(@v4);
  118. extract-4: extract(@v4, 1);
  119. }
  120. }