123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359 |
-
- // 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);
- }
|