extract-and-length.less 3.0 KB

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