mixins-guards.less 9.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359
  1. 
  2. // Stacking, functions..
  3. .light (@a) when (lightness(@a) > 50%) {
  4. color: white;
  5. }
  6. .light (@a) when (lightness(@a) < 50%) {
  7. color: black;
  8. }
  9. .light (@a) {
  10. margin: 1px;
  11. }
  12. .light1 { .light(#ddd) }
  13. .light2 { .light(#444) }
  14. // Arguments against each other
  15. .max (@a, @b) when (@a > @b) {
  16. width: @a;
  17. }
  18. .max (@a, @b) when (@a < @b) {
  19. width: @b;
  20. }
  21. .max1 { .max(3, 6) }
  22. .max2 { .max(8, 1) }
  23. // Globals inside guards
  24. @g: auto;
  25. .glob (@a) when (@a = @g) {
  26. margin: @a @g;
  27. }
  28. .glob1 { .glob(auto) }
  29. // Other operators
  30. .ops (@a) when (@a >= 0) {
  31. height: gt-or-eq;
  32. }
  33. .ops (@a) when (@a =< 0) {
  34. height: lt-or-eq;
  35. }
  36. .ops (@a) when (@a <= 0) {
  37. height: lt-or-eq-alias;
  38. }
  39. .ops (@a) when not(@a = 0) {
  40. height: not-eq;
  41. }
  42. .ops1 { .ops(0) }
  43. .ops2 { .ops(1) }
  44. .ops3 { .ops(-1) }
  45. // Scope and default values
  46. @a: auto;
  47. .default (@a: inherit) when (@a = inherit) {
  48. content: default;
  49. }
  50. .default1 { .default }
  51. // true & false keywords
  52. .test (@a) when (@a) {
  53. content: "true.";
  54. }
  55. .test (@a) when not (@a) {
  56. content: "false.";
  57. }
  58. .test1 { .test(true) }
  59. .test2 { .test(false) }
  60. .test3 { .test(1) }
  61. .test4 { .test(boo) }
  62. .test5 { .test("true") }
  63. // Boolean expressions
  64. .bool () when (true) and (false) { content: true and false } // FALSE
  65. .bool () when (true) and (true) { content: true and true } // TRUE
  66. .bool () when (true) { content: true } // TRUE
  67. .bool () when (false) and (false) { content: true } // FALSE
  68. .bool () when (false), (true) { content: false, true } // TRUE
  69. .bool () when (false) and (true) and (true), (true) { content: false and true and true, true } // TRUE
  70. .bool () when (true) and (true) and (false), (false) { content: true and true and false, false } // FALSE
  71. .bool () when (false), (true) and (true) { content: false, true and true } // TRUE
  72. .bool () when (false), (false), (true) { content: false, false, true } // TRUE
  73. .bool () when (false), (false) and (true), (false) { content: false, false and true, false } // FALSE
  74. .bool () when (false), (true) and (true) and (true), (false) { content: false, true and true and true, false } // TRUE
  75. .bool () when not (false) { content: not false }
  76. .bool () when not (true) and not (false) { content: not true and not false }
  77. .bool () when not (true) and not (true) { content: not true and not true }
  78. .bool () when not (false) and (false), not (false) { content: not false and false, not false }
  79. .bool1 { .bool }
  80. .equality-unit-test(@num) when (@num = 1%) {
  81. test: fail;
  82. }
  83. .equality-unit-test(@num) when (@num = 2) {
  84. test: pass;
  85. }
  86. .equality-units {
  87. .equality-unit-test(1px);
  88. .equality-unit-test(2px);
  89. }
  90. .colorguard(@col) when (@col = red) { content: is @col; }
  91. .colorguard(@col) when not (blue = @col) { content: is not blue its @col; }
  92. .colorguard(@col) {}
  93. .colorguardtest {
  94. .colorguard(red);
  95. .colorguard(blue);
  96. .colorguard(purple);
  97. }
  98. .stringguard(@str) when (@str = "theme1") { content: @str is "theme1"; }
  99. .stringguard(@str) when not ("theme2" = @str) { content: @str is not "theme2"; }
  100. .stringguard(@str) when (@str = 'theme1') { content: @str is 'theme1'; }
  101. .stringguard(@str) when not ('theme2' = @str) { content: @str is not 'theme2'; }
  102. .stringguard(@str) when (~"theme1" = @str) { content: @str is theme1; }
  103. .stringguard(@str) {}
  104. .stringguardtest {
  105. .stringguard("theme1");
  106. .stringguard("theme2");
  107. .stringguard('theme1');
  108. .stringguard('theme2');
  109. .stringguard(theme1);
  110. }
  111. .generic(@a, @b) {/**/}
  112. .generic(@a, @b) when (@a = @b) {content: @a is equal to @b}
  113. .generic(@a, @b) when (@b = @a) {content: @b is equal to @a too}
  114. .generic(@a, @b) when (@a < @b) {content: @a is less than @b}
  115. .generic(@a, @b) when (@b < @a) {content: @b is less than @a too}
  116. .generic(@a, @b) when (@a > @b) {content: @a is greater than @b}
  117. .generic(@a, @b) when (@b > @a) {content: @b is greater than @a too}
  118. .generic(@a, @b) when not(@a = @b) {content: @a is not equal to @b}
  119. .generic(@a, @b) when not(@b = @a) {content: @b is not equal to @a too}
  120. .variouse-types-comparison {
  121. .generic(true, false);
  122. .generic(1, true);
  123. .generic(2, 2px);
  124. .generic(3, ~"3");
  125. .generic(5, ~"4");
  126. .generic(abc, ~"abc");
  127. .generic(abc, "abc");
  128. .generic('abc', "abd");
  129. .generic(6, e("6"));
  130. .generic(9, 8);
  131. .generic(a, b);
  132. .generic(1 2, 3);
  133. }
  134. .list-comparison {
  135. .generic(a b c, a b c);
  136. .generic(a b c, a b d);
  137. .generic(a, b, c; a, b, c);
  138. .generic(a, b, c; a, b, d);
  139. .generic(1 2px 300ms, 1em 2 .3s);
  140. @space-list: 1 2 3;
  141. @comma-list: 1, 2, 3;
  142. @compound: @space-list @comma-list;
  143. .generic(@space-list, @comma-list);
  144. .generic(@comma-list, ~"1, 2, 3");
  145. .generic(@compound, @space-list @comma-list);
  146. .generic(@compound, @comma-list @space-list);
  147. .generic(@compound 4, ~"1 2 3 1, 2, 3 4");
  148. }
  149. .mixin(...) {
  150. catch:all;
  151. }
  152. .mixin(@var) when (@var=4) {
  153. declare: 4;
  154. }
  155. .mixin(@var) when (@var=4px) {
  156. declare: 4px;
  157. }
  158. #tryNumberPx {
  159. .mixin(4px);
  160. }
  161. .lock-mixin(@a) {
  162. .inner-locked-mixin(@x: @a) when (@a = 1) {
  163. a: @a;
  164. x: @x;
  165. }
  166. }
  167. .call-lock-mixin {
  168. .lock-mixin(1);
  169. .call-inner-lock-mixin {
  170. .inner-locked-mixin();
  171. }
  172. }
  173. .bug-100cm-1m(@a) when (@a = 1) {
  174. .failed {
  175. one-hundred: not-equal-to-1;
  176. }
  177. }
  178. .bug-100cm-1m(100cm);
  179. #ns {
  180. .mixin-for-root-usage(@a) when (@a > 0) {
  181. .mixin-generated-class {
  182. a: @a;
  183. }
  184. }
  185. }
  186. #ns > .mixin-for-root-usage(1);
  187. @namespaceGuard: 1;
  188. #guarded when (@namespaceGuard>0) {
  189. #deeper {
  190. .mixin() {
  191. guarded: namespace;
  192. }
  193. }
  194. }
  195. #guarded() when (@namespaceGuard>0) {
  196. #deeper {
  197. .mixin() {
  198. silent: namespace;
  199. }
  200. }
  201. }
  202. #guarded(@variable) when (@namespaceGuard>0) {
  203. #deeper {
  204. .mixin() {
  205. should: not match because namespace argument;
  206. }
  207. }
  208. }
  209. #guarded(@variable: default) when (@namespaceGuard>0) {
  210. #deeper {
  211. .mixin() {
  212. guarded: with default;
  213. }
  214. }
  215. }
  216. #guarded when (@namespaceGuard<0) {
  217. #deeper {
  218. .mixin() {
  219. should: not match because namespace guard;
  220. }
  221. }
  222. }
  223. #guarded-caller {
  224. #guarded > #deeper > .mixin();
  225. }
  226. #top {
  227. #deeper when (@namespaceGuard<0) {
  228. .mixin(@a) {
  229. should: not match because namespace guard;
  230. }
  231. }
  232. #deeper() when (@namespaceGuard>0) {
  233. .mixin(@a) {
  234. should: match @a;
  235. }
  236. }
  237. }
  238. #guarded-deeper {
  239. #top > #deeper > .mixin(1);
  240. }
  241. // namespaced & guarded mixin in root
  242. // outputs nothing but should pass:
  243. @guarded-mixin-for-root: true;
  244. #ns {
  245. .guarded-mixin-for-root() when (@guarded-mixin-for-root) {}
  246. }
  247. #ns > .guarded-mixin-for-root();
  248. // various combinations of nested or, and, parenthesis and negation
  249. .parenthesisNot(@value) when ((((@value)))) {
  250. parenthesisNot: just-value;
  251. }
  252. .parenthesisNot(@value) when (((not(@value)))) {
  253. parenthesisNot: negated once inside;
  254. }
  255. .parenthesisNot(@value) when not((((@value)))) {
  256. parenthesisNot: negated once outside;
  257. }
  258. .parenthesisNot(@value) when ((not((@value)))) {
  259. parenthesisNot: negated once middle;
  260. }
  261. .parenthesisNot(@value) when not(((not(@value)))) {
  262. parenthesisNot: negated twice 1;
  263. }
  264. .parenthesisNot(@value) when (not((not(@value)))) {
  265. parenthesisNot: negated twice 2;
  266. }
  267. .parenthesisNot(@value) when ((not(not(@value)))) {
  268. parenthesisNot: negated twice 3;
  269. }
  270. .parenthesisNot (...) when (default()) {
  271. parenthesisNot: none matched;
  272. }
  273. #parenthesisNot-true {
  274. .parenthesisNot(true);
  275. }
  276. #parenthesisNot-false {
  277. .parenthesisNot(false);
  278. }
  279. .orderOfEvaluation(@a1, @a2, @a3) when ((@a1) and (@a2) or (@a3)) {
  280. no-parenthesis: evaluated true 1a;
  281. }
  282. .orderOfEvaluation(@a1, @a2, @a3) when ((@a3) or (@a1) and (@a2)) {
  283. no-parenthesis: evaluated true 1b;
  284. }
  285. .orderOfEvaluation(@a1, @a2, @a3) when ((@a1) and ((@a2) or (@a3))) {
  286. no-parenthesis: evaluated true 1c;
  287. }
  288. .orderOfEvaluation(@a1, @a2, @a3) when (@a3), (@a1) and (@a2) {
  289. no-parenthesis: evaluated true 1d;
  290. }
  291. .orderOfEvaluation(@a1, @a2, @a3) when (((@a3) or (@a1)) and (@a2)) {
  292. no-parenthesis: evaluated true 1e;
  293. }
  294. .orderOfEvaluation(@a1, @a2, @a3) when ((@a1) and (@a2) or not (@a3)) {
  295. no-parenthesis: evaluated true 2a;
  296. }
  297. .orderOfEvaluation(@a1, @a2, @a3) when (not (@a3) or (@a1) and (@a2)) {
  298. no-parenthesis: evaluated true 2b;
  299. }
  300. .orderOfEvaluation(@a1, @a2, @a3) when not (@a3), (@a1) and (@a2) {
  301. no-parenthesis: evaluated true 2c;
  302. }
  303. .orderOfEvaluation(@a1, @a2, @a3) when (not (@a1) and (@a2) or (@a3)) {
  304. no-parenthesis: evaluated true 3;
  305. }
  306. .orderOfEvaluation(@a1, @a2, @a3) when ((((@a1) and (@a2) or (@a3)))) {
  307. no-parenthesis: evaluated true 4;
  308. }
  309. .orderOfEvaluation(@a1, @a2, @a3) when (((@a1) and (@a2)) or (@a3)) {
  310. with-parenthesis: evaluated true;
  311. }
  312. .orderOfEvaluation(...) when (default()) {
  313. orderOfEvaluation: evaluated false;
  314. }
  315. #orderOfEvaluation-false-false-true {
  316. .orderOfEvaluation(false, false, true);
  317. }
  318. #orderOfEvaluation-false-false-false {
  319. .orderOfEvaluation(false, false, false);
  320. }
  321. #orderOfEvaluation-true-true-false {
  322. .orderOfEvaluation(true, true, false);
  323. }