Fundacja Nowoczesna Polska | Kod - redakcja.git/blob

   1 .mixin (@a: 1px, @b: 50%) {
   2   width: (@a * 5);
   3   height: (@b - 1%);
   4 }
   5
   6 .mixina (@style, @width, @color: black) {
   7     border: @width @style @color;
   8 }
   9
  10 .mixiny
  11 (@a: 0, @b: 0) {
  12   margin: @a;
  13   padding: @b;
  14 }
  15
  16 .hidden() {
  17   color: transparent; // asd
  18 }
  19
  20 #hidden {
  21   .hidden;
  22 }
  23
  24 #hidden1 {
  25   .hidden();
  26 }
  27
  28 .two-args {
  29   color: blue;
  30   .mixin(2px, 100%);
  31   .mixina(dotted, 2px);
  32 }
  33
  34 .one-arg {
  35   .mixin(3px);
  36 }
  37
  38 .no-parens {
  39   .mixin;
  40 }
  41
  42 .no-args {
  43   .mixin();
  44 }
  45
  46 .var-args {
  47   @var: 9;
  48   .mixin(@var, (@var * 2));
  49 }
  50
  51 .multi-mix {
  52   .mixin(2px, 30%);
  53   .mixiny(4, 5);
  54 }
  55
  56 .maxa(@arg1: 10, @arg2: #f00) {
  57   padding: (@arg1 * 2px);
  58   color: @arg2;
  59 }
  60
  61 body {
  62   .maxa(15);
  63 }
  64
  65 @glob: 5;
  66 .global-mixin(@a:2) {
  67   width: (@glob + @a);
  68 }
  69
  70 .scope-mix {
  71   .global-mixin(3);
  72 }
  73
  74 .nested-ruleset (@width: 200px) {
  75     width: @width;
  76     .column { margin: @width; }
  77 }
  78 .content {
  79     .nested-ruleset(600px);
  80 }
  81
  82 //
  83
  84 .same-var-name2(@radius) {
  85   radius: @radius;
  86 }
  87 .same-var-name(@radius) {
  88   .same-var-name2(@radius);
  89 }
  90 #same-var-name {
  91   .same-var-name(5px);
  92 }
  93
  94 //
  95
  96 .var-inside () {
  97     @var: 10px;
  98     width: @var;
  99 }
 100 #var-inside { .var-inside; }
 101
 102 .mixin-arguments (@width: 0px, ...) {
 103     border: @arguments;
 104     width: @width;
 105 }
 106
 107 .arguments {
 108     .mixin-arguments(1px, solid, black);
 109 }
 110 .arguments2 {
 111     .mixin-arguments();
 112 }
 113 .arguments3 {
 114     .mixin-arguments;
 115 }
 116
 117 .mixin-arguments2 (@width, @rest...) {
 118     border: @arguments;
 119     rest: @rest;
 120     width: @width;
 121 }
 122 .arguments4 {
 123     .mixin-arguments2(0, 1, 2, 3, 4);
 124 }
 125
 126 // Edge cases
 127
 128 .edge-case {
 129     .mixin-arguments("{");
 130 }
 131
 132 // Division vs. Literal Slash
 133 .border-radius(@r: 2px/5px) {
 134   border-radius: @r;
 135 }
 136 .slash-vs-math {
 137   .border-radius();
 138   .border-radius(5px/10px);
 139   .border-radius((3px * 2));
 140 }
 141 // semi-colon vs comma for delimiting
 142
 143 .mixin-takes-one(@a) {
 144     one: @a;
 145 }
 146
 147 .mixin-takes-two(@a; @b) {
 148     one: @a;
 149     two: @b;
 150 }
 151
 152 .comma-vs-semi-colon {
 153     .mixin-takes-two(@a : a; @b : b, c);
 154     .mixin-takes-two(@a : d, e; @b : f);
 155     .mixin-takes-one(@a: g);
 156     .mixin-takes-one(@a : h;);
 157     .mixin-takes-one(i);
 158     .mixin-takes-one(j;);
 159     .mixin-takes-two(k, l);
 160     .mixin-takes-one(m, n;);
 161     .mixin-takes-two(o, p; q);
 162     .mixin-takes-two(r, s; t;);
 163 }
 164
 165 .mixin-conflict(@a:defA, @b:defB, @c:defC) {
 166   three: @a, @b, @c;
 167 }
 168
 169 .mixin-conflict(@a:defA, @b:defB, @c:defC, @d:defD) {
 170   four: @a, @b, @c, @d;
 171 }
 172
 173 #named-conflict {
 174   .mixin-conflict(11, 12, 13, @a:a);
 175   .mixin-conflict(@a:a, 21, 22, 23);
 176 }
 177 @a: 3px;
 178 .mixin-default-arg(@a: 1px, @b: @a, @c: @b) {
 179   defaults: 1px 1px 1px;
 180   defaults: 2px 2px 2px;
 181 }
 182
 183 .test-mixin-default-arg {
 184   .mixin-default-arg();
 185   .mixin-default-arg(2px);
 186 }
 187
 188 .mixin-comma-default1(@color; @padding; @margin: 2, 2, 2, 2) {
 189   margin: @margin;
 190 }
 191 .selector {
 192   .mixin-comma-default1(#33acfe; 4);
 193 }
 194 .mixin-comma-default2(@margin: 2, 2, 2, 2;) {
 195   margin: @margin;
 196 }
 197 .selector2 {
 198   .mixin-comma-default2();
 199 }
 200 .mixin-comma-default3(@margin: 2, 2, 2, 2) {
 201   margin: @margin;
 202 }
 203 .selector3 {
 204   .mixin-comma-default3(4,2,2,2);
 205 }
 206
 207 .test-calling-one-arg-mixin(@a) {
 208 }
 209
 210 .test-calling-one-arg-mixin(@a, @b, @rest...) {
 211 }
 212
 213 div {
 214   .test-calling-one-arg-mixin(1);
 215 }