pattern_matching.less 1.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167
  1. .demo (light, @color) {
  2. color: lighten(@color, 10%);
  3. }
  4. .demo (@_, @color) {
  5. display: block;
  6. }
  7. @switch: light;
  8. .class {
  9. .demo(@switch, #888);
  10. }
  11. // by arity
  12. .mixin () {
  13. zero: 0;
  14. }
  15. .mixin (@a: 1px) {
  16. one: 1;
  17. }
  18. .mixin (@a) {
  19. one-req: 1;
  20. }
  21. .mixin (@a: 1px, @b: 2px) {
  22. two: 2;
  23. }
  24. .mixin (@a, @b, @c) {
  25. three-req: 3;
  26. }
  27. .mixin (@a: 1px, @b: 2px, @c: 3px) {
  28. three: 3;
  29. }
  30. .zero {
  31. .mixin();
  32. }
  33. .one {
  34. .mixin(1);
  35. }
  36. .two {
  37. .mixin(1, 2);
  38. }
  39. .three {
  40. .mixin(1, 2, 3);
  41. }
  42. //
  43. .mixout ('left') {
  44. left: 1;
  45. }
  46. .mixout ('right') {
  47. right: 1;
  48. }
  49. .left {
  50. .mixout('left');
  51. }
  52. .right {
  53. .mixout('right');
  54. }
  55. //
  56. .border (@side, @width) {
  57. color: black;
  58. .border-side(@side, @width);
  59. }
  60. .border-side (left, @w) {
  61. border-left: @w;
  62. }
  63. .border-side (right, @w) {
  64. border-right: @w;
  65. }
  66. .border-right {
  67. .border(right, 4px);
  68. }
  69. .border-left {
  70. .border(left, 4px);
  71. }
  72. //
  73. .border-radius (@r) {
  74. both: @r * 10;
  75. }
  76. .border-radius (@r, left) {
  77. left: @r;
  78. }
  79. .border-radius (@r, right) {
  80. right: @r;
  81. }
  82. .only-right {
  83. .border-radius(33, right);
  84. }
  85. .only-left {
  86. .border-radius(33, left);
  87. }
  88. .left-right {
  89. .border-radius(33);
  90. }
  91. .hola(hello, @hello...) {
  92. color: blue;
  93. }
  94. #hola {
  95. .hola(hello, world);
  96. .hola(jello, world);
  97. }
  98. .resty(@hello, @world, @the_rest...) {
  99. padding: @hello @world;
  100. rest: @the_rest;
  101. }
  102. #nnn {
  103. .body(10, 10, 10, 10, 10);
  104. .body(10, 10, 10);
  105. .body(10, 10);
  106. .body(10);
  107. .body();
  108. }
  109. .defaults(@aa, @bb:e343, @cc: "heah", ...) {
  110. height: @aa;
  111. }
  112. #defaults_1 {
  113. .defaults();
  114. .defaults(one);
  115. .defaults(two, one);
  116. .defaults(three, two, one);
  117. .defaults(four, three, two, one);
  118. }
  119. .thing() { color: green; }
  120. .thing(...) { color: blue; }
  121. .thing { color: red; }
  122. #aa {
  123. .thing();
  124. }
  125. #bb {
  126. .thing;
  127. }
  128. #cc {
  129. .thing(1);
  130. }