extract-and-length.less 3.0 KB

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