120 lines
2.2 KiB
Plaintext
120 lines
2.2 KiB
Plaintext
|
@a: 2;
|
||
|
|
@x: (@a * @a);
|
||
|
|
@y: (@x + 1);
|
||
|
|
@z: (@x * 2 + @y);
|
||
|
|
@var: -1;
|
||
|
|
|
||
|
|
.variables {
|
||
|
|
width: (@z + 1cm); // 14cm
|
||
|
|
}
|
||
|
|
|
||
|
|
@b: @a * 10;
|
||
|
|
@c: #888;
|
||
|
|
|
||
|
|
@fonts: "Trebuchet MS", Verdana, sans-serif;
|
||
|
|
@f: @fonts;
|
||
|
|
|
||
|
|
@quotes: "~" "~";
|
||
|
|
@q: @quotes;
|
||
|
|
@onePixel: 1px;
|
||
|
|
|
||
|
|
.variables {
|
||
|
|
height: (@b + @x + 0px); // 24px
|
||
|
|
color: @c;
|
||
|
|
font-family: @f;
|
||
|
|
quotes: @q;
|
||
|
|
}
|
||
|
|
|
||
|
|
.redef {
|
||
|
|
@var: 0;
|
||
|
|
.inition {
|
||
|
|
@var: 4;
|
||
|
|
@var: 2;
|
||
|
|
three: @var;
|
||
|
|
@var: 3;
|
||
|
|
}
|
||
|
|
zero: @var;
|
||
|
|
}
|
||
|
|
|
||
|
|
@important-var: @c !important;
|
||
|
|
@important-var-two: @a !important;
|
||
|
|
.values {
|
||
|
|
minus-one: @var;
|
||
|
|
@a: 'Trebuchet';
|
||
|
|
@multi: 'A', B, C;
|
||
|
|
font-family: @a, @a, @a;
|
||
|
|
color: @c !important;
|
||
|
|
same-color: @important-var;
|
||
|
|
same-again: @important-var !important;
|
||
|
|
multi-important: @important-var @important-var, @important-var-two;
|
||
|
|
multi: something @multi, @a;
|
||
|
|
}
|
||
|
|
|
||
|
|
.variable-names {
|
||
|
|
.quoted {
|
||
|
|
@var: 'hello';
|
||
|
|
@name: 'var';
|
||
|
|
name: @@name;
|
||
|
|
}
|
||
|
|
|
||
|
|
.unquoted {
|
||
|
|
@var: 'hello';
|
||
|
|
@name: var;
|
||
|
|
name: @@name;
|
||
|
|
}
|
||
|
|
|
||
|
|
.color-keyword {
|
||
|
|
@red: 'hello';
|
||
|
|
@name: red;
|
||
|
|
name: @@name;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.alpha {
|
||
|
|
@var: 42;
|
||
|
|
filter: alpha(opacity=@var);
|
||
|
|
}
|
||
|
|
|
||
|
|
.polluteMixin() {
|
||
|
|
@a: 'pollution';
|
||
|
|
}
|
||
|
|
.testPollution {
|
||
|
|
@a: 'no-pollution';
|
||
|
|
a: @a;
|
||
|
|
.polluteMixin();
|
||
|
|
a: @a;
|
||
|
|
}
|
||
|
|
|
||
|
|
.units {
|
||
|
|
width: @onePixel;
|
||
|
|
same-unit-as-previously: (@onePixel / @onePixel);
|
||
|
|
square-pixel-divided: (@onePixel * @onePixel / @onePixel);
|
||
|
|
odd-unit: unit((@onePixel * 4em / 2cm));
|
||
|
|
percentage: (10 * 50%);
|
||
|
|
pixels: (50px * 10);
|
||
|
|
conversion-metric-a: (20mm + 1cm);
|
||
|
|
conversion-metric-b: (1cm + 20mm);
|
||
|
|
conversion-imperial: (1in + 72pt + 6pc);
|
||
|
|
custom-unit: (42octocats * 10);
|
||
|
|
custom-unit-cancelling: (8cats * 9dogs / 4cats);
|
||
|
|
mix-units: (1px + 1em);
|
||
|
|
invalid-units: (1px * 1px);
|
||
|
|
.fallback {
|
||
|
|
@px: 14px;
|
||
|
|
@em: 1.4em;
|
||
|
|
@cm: 10cm;
|
||
|
|
div-px-1: (@px / @em);
|
||
|
|
div-px-2: ((@px / @em) / @cm);
|
||
|
|
sub-px-1: (@px - @em);
|
||
|
|
sub-cm-1: (@cm - (@px - @em));
|
||
|
|
mul-px-1: (@px * @em);
|
||
|
|
mul-em-1: (@em * @px);
|
||
|
|
mul-em-2: ((@em * @px) * @cm);
|
||
|
|
mul-cm-1: (@cm * (@em * @px));
|
||
|
|
add-px-1: (@px + @em);
|
||
|
|
add-px-2: ((@px + @em) + @cm);
|
||
|
|
mul-px-2: ((1 * @px) * @cm);
|
||
|
|
mul-px-3: ((@px * 1) * @cm);
|
||
|
|
}
|
||
|
|
}
|