mixins-args.less 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205
  1. .mixin (@a: 1px, @b: 50%) {
  2. width: (@a * 5);
  3. height: (@b - 1%);
  4. }
  5. .mixina (@style, @width, @color: black) {
  6. border: @width @style @color;
  7. }
  8. .mixiny
  9. (@a: 0, @b: 0) {
  10. margin: @a;
  11. padding: @b;
  12. }
  13. .hidden() {
  14. color: transparent; // asd
  15. }
  16. #hidden {
  17. .hidden;
  18. }
  19. #hidden1 {
  20. .hidden();
  21. }
  22. .two-args {
  23. color: blue;
  24. .mixin(2px, 100%);
  25. .mixina(dotted, 2px);
  26. }
  27. .one-arg {
  28. .mixin(3px);
  29. }
  30. .no-parens {
  31. .mixin;
  32. }
  33. .no-args {
  34. .mixin();
  35. }
  36. .var-args {
  37. @var: 9;
  38. .mixin(@var, (@var * 2));
  39. }
  40. .multi-mix {
  41. .mixin(2px, 30%);
  42. .mixiny(4, 5);
  43. }
  44. .maxa(@arg1: 10, @arg2: #f00) {
  45. padding: (@arg1 * 2px);
  46. color: @arg2;
  47. }
  48. body {
  49. .maxa(15);
  50. }
  51. @glob: 5;
  52. .global-mixin(@a:2) {
  53. width: (@glob + @a);
  54. }
  55. .scope-mix {
  56. .global-mixin(3);
  57. }
  58. .nested-ruleset (@width: 200px) {
  59. width: @width;
  60. .column { margin: @width; }
  61. }
  62. .content {
  63. .nested-ruleset(600px);
  64. }
  65. //
  66. .same-var-name2(@radius) {
  67. radius: @radius;
  68. }
  69. .same-var-name(@radius) {
  70. .same-var-name2(@radius);
  71. }
  72. #same-var-name {
  73. .same-var-name(5px);
  74. }
  75. //
  76. .var-inside () {
  77. @var: 10px;
  78. width: @var;
  79. }
  80. #var-inside { .var-inside; }
  81. .mixin-arguments (@width: 0px, ...) {
  82. border: @arguments;
  83. width: @width;
  84. }
  85. .arguments {
  86. .mixin-arguments(1px, solid, black);
  87. }
  88. .arguments2 {
  89. .mixin-arguments();
  90. }
  91. .arguments3 {
  92. .mixin-arguments;
  93. }
  94. .mixin-arguments2 (@width, @rest...) {
  95. border: @arguments;
  96. rest: @rest;
  97. width: @width;
  98. }
  99. .arguments4 {
  100. .mixin-arguments2(0, 1, 2, 3, 4);
  101. }
  102. // Edge cases
  103. .edge-case {
  104. .mixin-arguments("{");
  105. }
  106. // Division vs. Literal Slash
  107. .border-radius(@r: 2px/5px) {
  108. border-radius: @r;
  109. }
  110. .slash-vs-math {
  111. .border-radius();
  112. .border-radius(5px/10px);
  113. .border-radius((3px * 2));
  114. }
  115. // semi-colon vs comma for delimiting
  116. .mixin-takes-one(@a) {
  117. one: @a;
  118. }
  119. .mixin-takes-two(@a; @b) {
  120. one: @a;
  121. two: @b;
  122. }
  123. .comma-vs-semi-colon {
  124. .mixin-takes-two(@a : a; @b : b, c);
  125. .mixin-takes-two(@a : d, e; @b : f);
  126. .mixin-takes-one(@a: g);
  127. .mixin-takes-one(@a : h;);
  128. .mixin-takes-one(i);
  129. .mixin-takes-one(j;);
  130. .mixin-takes-two(k, l);
  131. .mixin-takes-one(m, n;);
  132. .mixin-takes-two(o, p; q);
  133. .mixin-takes-two(r, s; t;);
  134. }
  135. .mixin-conflict(@a:defA, @b:defB, @c:defC) {
  136. three: @a, @b, @c;
  137. }
  138. .mixin-conflict(@a:defA, @b:defB, @c:defC, @d:defD) {
  139. four: @a, @b, @c, @d;
  140. }
  141. #named-conflict {
  142. .mixin-conflict(11, 12, 13, @a:a);
  143. .mixin-conflict(@a:a, 21, 22, 23);
  144. }
  145. @a: 3px;
  146. .mixin-default-arg(@a: 1px, @b: @a, @c: @b) {
  147. defaults: 1px 1px 1px;
  148. defaults: 2px 2px 2px;
  149. }
  150. .test-mixin-default-arg {
  151. .mixin-default-arg();
  152. .mixin-default-arg(2px);
  153. }
  154. .mixin-comma-default1(@color; @padding; @margin: 2, 2, 2, 2) {
  155. margin: @margin;
  156. }
  157. .selector {
  158. .mixin-comma-default1(#33acfe; 4);
  159. }
  160. .mixin-comma-default2(@margin: 2, 2, 2, 2;) {
  161. margin: @margin;
  162. }
  163. .selector2 {
  164. .mixin-comma-default2();
  165. }
  166. .mixin-comma-default3(@margin: 2, 2, 2, 2) {
  167. margin: @margin;
  168. }
  169. .selector3 {
  170. .mixin-comma-default3(4,2,2,2);
  171. }