// Stacking, functions..
.light (@a) when (lightness(@a) > 50%) {
color: white;
} .light (@a) when (lightness(@a) < 50%) {
color: black;
} .light (@a) {
margin: 1px;
}
.light1 { .light(ddd) } .light2 { .light(#444) }
// Arguments against each other
.max (@a, @b) when (@a > @b) {
width: @a;
} .max (@a, @b) when (@a < @b) {
width: @b;
}
.max1 { .max(3, 6) } .max2 { .max(8, 1) }
// Globals inside guards
@g: auto;
.glob (@a) when (@a = @g) {
margin: @a @g;
} .glob1 { .glob(auto) }
// Other operators
.ops (@a) when (@a >= 0) {
height: gt-or-eq;
} .ops (@a) when (@a =< 0) {
height: lt-or-eq;
} .ops (@a) when (@a <= 0) {
height: lt-or-eq-alias;
} .ops (@a) when not(@a = 0) {
height: not-eq;
} .ops1 { .ops(0) } .ops2 { .ops(1) } .ops3 { .ops(-1) }
// Scope and default values
@a: auto;
.default (@a: inherit) when (@a = inherit) {
content: default;
} .default1 { .default }
// true & false keywords .test (@a) when (@a) {
content: "true.";
} .test (@a) when not (@a) {
content: "false.";
}
.test1 { .test(true) } .test2 { .test(false) } .test3 { .test(1) } .test4 { .test(boo) } .test5 { .test(“true”) }
// Boolean expressions
.bool () when (true) and (false) { content: true and false } // FALSE .bool () when (true) and (true) { content: true and true } // TRUE .bool () when (true) { content: true } // TRUE .bool () when (false) and (false) { content: true } // FALSE .bool () when (false), (true) { content: false, true } // TRUE .bool () when (false) and (true) and (true), (true) { content: false and true and true, true } // TRUE .bool () when (true) and (true) and (false), (false) { content: true and true and false, false } // FALSE .bool () when (false), (true) and (true) { content: false, true and true } // TRUE .bool () when (false), (false), (true) { content: false, false, true } // TRUE .bool () when (false), (false) and (true), (false) { content: false, false and true, false } // FALSE .bool () when (false), (true) and (true) and (true), (false) { content: false, true and true and true, false } // TRUE .bool () when not (false) { content: not false } .bool () when not (true) and not (false) { content: not true and not false } .bool () when not (true) and not (true) { content: not true and not true } .bool () when not (false) and (false), not (false) { content: not false and false, not false }
.bool1 { .bool }
.equality-unit-test(@num) when (@num = 1%) {
test: fail;
} .equality-unit-test(@num) when (@num = 2) {
test: pass;
} .equality-units {
.equality-unit-test(1px); .equality-unit-test(2px);
}
.colorguard(@col) when (@col = red) { content: is @col; } .colorguard(@col) when not (blue = @col) { content: is not blue its @col; } .colorguard(@col) {} .colorguardtest {
.colorguard(red); .colorguard(blue); .colorguard(purple);
}
.stringguard(@str) when (@str = “theme1”) { content: @str is “theme1”; } .stringguard(@str) when not (“theme2” = @str) { content: @str is not “theme2”; } .stringguard(@str) when (@str = 'theme1') { content: @str is 'theme1'; } .stringguard(@str) when not ('theme2' = @str) { content: @str is not 'theme2'; } .stringguard(@str) when (~“theme1” = @str) { content: @str is theme1; } .stringguard(@str) {} .stringguardtest {
.stringguard("theme1"); .stringguard("theme2"); .stringguard('theme1'); .stringguard('theme2'); .stringguard(theme1);
}
.generic(@a, @b) {/**/} .generic(@a, @b) when (@a = @b) {content: @a is equal to @b} .generic(@a, @b) when (@b = @a) {content: @b is equal to @a too} .generic(@a, @b) when (@a < @b) {content: @a is less than @b} .generic(@a, @b) when (@b < @a) {content: @b is less than @a too} .generic(@a, @b) when (@a > @b) {content: @a is greater than @b} .generic(@a, @b) when (@b > @a) {content: @b is greater than @a too} .generic(@a, @b) when not(@a = @b) {content: @a is not equal to @b} .generic(@a, @b) when not(@b = @a) {content: @b is not equal to @a too}
.variouse-types-comparison {
.generic(true, false); .generic(1, true); .generic(2, 2px); .generic(3, ~"3"); .generic(5, ~"4"); .generic(abc, ~"abc"); .generic(abc, "abc"); .generic('abc', "abd"); .generic(6, e("6")); .generic(`9`, 8); .generic(a, b); .generic(1 2, 3);
}
.list-comparison {
.generic(a b c, a b c); .generic(a b c, a b d); .generic(a, b, c; a, b, c); .generic(a, b, c; a, b, d); .generic(1 2px 300ms, 1em 2 .3s); @space-list: 1 2 3; @comma-list: 1, 2, 3; @compound: @space-list @comma-list; .generic(@space-list, @comma-list); .generic(@comma-list, ~"1, 2, 3"); .generic(@compound, @space-list @comma-list); .generic(@compound, @comma-list @space-list); .generic(@compound 4, ~"1 2 3 1, 2, 3 4");
}
.mixin(…) {
catch:all;
} .mixin(@var) when (@var=4) {
declare: 4;
} .mixin(@var) when (@var=4px) {
declare: 4px;
} tryNumberPx {
.mixin(4px);
}
.lock-mixin(@a) {
.inner-locked-mixin(@x: @a) when (@a = 1) { a: @a; x: @x; }
} .call-lock-mixin {
.lock-mixin(1); .call-inner-lock-mixin { .inner-locked-mixin(); }
} .bug-100cm-1m(@a) when (@a = 1) {
.failed { one-hundred: not-equal-to-1; }
} .bug-100cm-1m(100cm);
ns {
.mixin-for-root-usage(@a) when (@a > 0) { .mixin-generated-class { a: @a; } }
}
ns > .mixin-for-root-usage(1);
@namespaceGuard: 1; guarded when (@namespaceGuard>0) {
#deeper { .mixin() { guarded: namespace; } }
} guarded() when (@namespaceGuard>0) {
#deeper { .mixin() { silent: namespace; } }
} guarded(@variable) when (@namespaceGuard>0) {
#deeper { .mixin() { should: not match because namespace argument; } }
} guarded(@variable: default) when (@namespaceGuard>0) {
#deeper { .mixin() { guarded: with default; } }
} guarded when (@namespaceGuard<0) {
#deeper { .mixin() { should: not match because namespace guard; } }
} guarded-caller {
#guarded > #deeper > .mixin();
} top {
#deeper when (@namespaceGuard<0) { .mixin(@a) { should: not match because namespace guard; } } #deeper() when (@namespaceGuard>0) { .mixin(@a) { should: match @a; } }
} guarded-deeper {
#top > #deeper > .mixin(1);
}
// namespaced & guarded mixin in root // outputs nothing but should pass:
@guarded-mixin-for-root: true; ns {
.guarded-mixin-for-root() when (@guarded-mixin-for-root) {}
} ns > .guarded-mixin-for-root(); // various combinations of nested or, and, paranthesis and negation .parenthesisNot(@value) when ((((@value)))) {
parenthesisNot: just-value;
} .parenthesisNot(@value) when (((not(@value)))) {
parenthesisNot: negated once inside;
} .parenthesisNot(@value) when not((((@value)))) {
parenthesisNot: negated once outside;
} .parenthesisNot(@value) when ((not((@value)))) {
parenthesisNot: negated once middle;
} .parenthesisNot(@value) when not(((not(@value)))) {
parenthesisNot: negated twice 1;
} .parenthesisNot(@value) when (not((not(@value)))) {
parenthesisNot: negated twice 2;
} .parenthesisNot(@value) when ((not(not(@value)))) {
parenthesisNot: negated twice 3;
} .parenthesisNot (…) when (default()) {
parenthesisNot: none matched;
}
parenthesisNot-true {
.parenthesisNot(true);
} parenthesisNot-false {
.parenthesisNot(false);
}
.orderOfEvaluation(@a1, @a2, @a3) when ((@a1) and (@a2) or (@a3)) {
no-parenthesis: evaluated true 1a;
} .orderOfEvaluation(@a1, @a2, @a3) when ((@a3) or (@a1) and (@a2)) {
no-parenthesis: evaluated true 1b;
} .orderOfEvaluation(@a1, @a2, @a3) when ((@a1) and ((@a2) or (@a3))) {
no-parenthesis: evaluated true 1c;
} .orderOfEvaluation(@a1, @a2, @a3) when (@a3), (@a1) and (@a2) {
no-parenthesis: evaluated true 1d;
} .orderOfEvaluation(@a1, @a2, @a3) when (((@a3) or (@a1)) and (@a2)) {
no-parenthesis: evaluated true 1e;
} .orderOfEvaluation(@a1, @a2, @a3) when ((@a1) and (@a2) or not (@a3)) {
no-parenthesis: evaluated true 2a;
} .orderOfEvaluation(@a1, @a2, @a3) when (not (@a3) or (@a1) and (@a2)) {
no-parenthesis: evaluated true 2b;
} .orderOfEvaluation(@a1, @a2, @a3) when not (@a3), (@a1) and (@a2) {
no-parenthesis: evaluated true 2c;
} .orderOfEvaluation(@a1, @a2, @a3) when (not (@a1) and (@a2) or (@a3)) {
no-parenthesis: evaluated true 3;
} .orderOfEvaluation(@a1, @a2, @a3) when ((((@a1) and (@a2) or (@a3)))) {
no-parenthesis: evaluated true 4;
} .orderOfEvaluation(@a1, @a2, @a3) when (((@a1) and (@a2)) or (@a3)) {
with-parenthesis: evaluated true;
} .orderOfEvaluation(…) when (default()) {
orderOfEvaluation: evaluated false;
} orderOfEvaluation-false-false-true {
.orderOfEvaluation(false, false, true);
} orderOfEvaluation-false-false-false {
.orderOfEvaluation(false, false, false);
} orderOfEvaluation-true-true-false {
.orderOfEvaluation(true, true, false);
}