mixins-guards.less


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