Fundacja Nowoczesna Polska | Kod - redakcja.git/blob

   1
   2 // Stacking, functions..
   3
   4 .light (@a) when (lightness(@a) > 50%) {
   5   color: white;
   6 }
   7 .light (@a) when (lightness(@a) < 50%) {
   8   color: black;
   9 }
  10 .light (@a) {
  11   margin: 1px;
  12 }
  13
  14 .light1 { .light(#ddd) }
  15 .light2 { .light(#444) }
  16
  17 // Arguments against each other
  18
  19 .max (@a, @b) when (@a > @b) {
  20   width: @a;
  21 }
  22 .max (@a, @b) when (@a < @b) {
  23   width: @b;
  24 }
  25
  26 .max1 { .max(3, 6) }
  27 .max2 { .max(8, 1) }
  28
  29 // Globals inside guards
  30
  31 @g: auto;
  32
  33 .glob (@a) when (@a = @g) {
  34   margin: @a @g;
  35 }
  36 .glob1 { .glob(auto) }
  37
  38 // Other operators
  39
  40 .ops (@a) when (@a >= 0) {
  41   height: gt-or-eq;
  42 }
  43 .ops (@a) when (@a =< 0) {
  44   height: lt-or-eq;
  45 }
  46 .ops (@a) when (@a <= 0) {
  47   height: lt-or-eq-alias;
  48 }
  49 .ops (@a) when not(@a = 0) {
  50   height: not-eq;
  51 }
  52 .ops1 { .ops(0) }
  53 .ops2 { .ops(1) }
  54 .ops3 { .ops(-1) }
  55
  56 // Scope and default values
  57
  58 @a: auto;
  59
  60 .default (@a: inherit) when (@a = inherit) {
  61   content: default;
  62 }
  63 .default1 { .default }
  64
  65 // true & false keywords
  66 .test (@a) when (@a) {
  67     content: "true.";
  68 }
  69 .test (@a) when not (@a) {
  70     content: "false.";
  71 }
  72
  73 .test1 { .test(true) }
  74 .test2 { .test(false) }
  75 .test3 { .test(1) }
  76 .test4 { .test(boo) }
  77 .test5 { .test("true") }
  78
  79 // Boolean expressions
  80
  81 .bool () when (true) and (false)                             { content: true and false } // FALSE
  82 .bool () when (true) and (true)                              { content: true and true } // TRUE
  83 .bool () when (true)                                         { content: true } // TRUE
  84 .bool () when (false) and (false)                            { content: true } // FALSE
  85 .bool () when (false), (true)                                { content: false, true } // TRUE
  86 .bool () when (false) and (true) and (true),  (true)         { content: false and true and true, true } // TRUE
  87 .bool () when (true)  and (true) and (false), (false)        { content: true and true and false, false } // FALSE
  88 .bool () when (false), (true) and (true)                     { content: false, true and true } // TRUE
  89 .bool () when (false), (false), (true)                       { content: false, false, true } // TRUE
  90 .bool () when (false), (false) and (true), (false)           { content: false, false and true, false } // FALSE
  91 .bool () when (false), (true) and (true) and (true), (false) { content: false, true and true and true, false } // TRUE
  92 .bool () when not (false)                                    { content: not false }
  93 .bool () when not (true) and not (false)                     { content: not true and not false }
  94 .bool () when not (true) and not (true)                      { content: not true and not true }
  95 .bool () when not (false) and (false), not (false)           { content: not false and false, not false }
  96
  97 .bool1 { .bool }
  98
  99 .equality-unit-test(@num) when (@num = 1%) {
 100   test: fail;
 101 }
 102 .equality-unit-test(@num) when (@num = 2) {
 103   test: pass;
 104 }
 105 .equality-units {
 106   .equality-unit-test(1px);
 107   .equality-unit-test(2px);
 108 }
 109
 110 .colorguard(@col) when (@col = red)                                                     { content: is @col; }
 111 .colorguard(@col) when not (blue = @col)                                        { content: is not blue its @col; }
 112 .colorguard(@col)                                                                                       {}
 113 .colorguardtest {
 114     .colorguard(red);
 115         .colorguard(blue);
 116         .colorguard(purple);
 117 }
 118
 119 .stringguard(@str) when (@str = "theme1")                                       { content: is theme1; }
 120 .stringguard(@str) when not ("theme2" = @str)                           { content: is not theme2; }
 121 .stringguard(@str) when (~"theme1" = @str)                                      { content: is theme1 no quotes; }
 122 .stringguard(@str)                                                                                      {}
 123 .stringguardtest {
 124     .stringguard("theme1");
 125         .stringguard("theme2");
 126         .stringguard(theme1);
 127 }
 128
 129 .mixin(...) {
 130   catch:all;
 131 }
 132 .mixin(@var) when (@var=4) {
 133   declare: 4;
 134 }
 135 .mixin(@var) when (@var=4px) {
 136   declare: 4px;
 137 }
 138 #tryNumberPx {
 139   .mixin(4px);
 140 }
 141
 142 .lock-mixin(@a) {
 143  .inner-locked-mixin(@x: @a) when (@a = 1) {
 144     a: @a;
 145     x: @x;
 146   }
 147 }
 148 .call-lock-mixin {
 149   .lock-mixin(1);
 150   .call-inner-lock-mixin {
 151     .inner-locked-mixin();
 152   }
 153 }