mixins-args.less 3.8 KB

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