359 lines
9.1 KiB
Plaintext
359 lines
9.1 KiB
Plaintext
|
|
// 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, parenthesis 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);
|
|
}
|