1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
|
$x: 3;
div {
noo: not $x;
poo: not 3;
doo: not($x);
goo: not(3);
zoo: not 1 + 2;
roo: not not not $x;
hoo: not not not 3;
}
@mixin foo($x-1, $x-2) {
goo: $x-1;
poo: $x-2;
}
$hux: "blah.css";
span {
a: rgba(100, 20, 0, 1);
b: rgba(#abc, 1);
c: compact(hello, my, false, name, is, false, aaron, false, false);
d: join(1 2 3, 4 5 6, comma);
e: join(a b c, d e f);
f: change-color(#102030, $blue: 5);
g: change-color(#102030, $red: 120, $blue: 5);
h: hsl(25, 100%, 80%);
h: change-color(#ffc499, $alpha: 0.8, $lightness: 40%);
h: change-color(hsl(25, 100%, 80%), $alpha: 0.8, $lightness: 40%);
i: hsla(25, 100%, 40%, 0.8);
foo: url("http://blah/flah/grah");
foo: url(http://foo/bar/buzz.css);
foo: url(hey#{1+3}ho.css);
foo: url($hux);
bug: compact(false 1 2 false 3 4 5 false);
pug: compact(false, 1, 2, false, 3, 4, 5, false);
mug: compact((flug, false, blug, false, krug, false));
}
@mixin bg($file) {
background: url($file) no-repeat;
}
div {
flug: url(bug.mug);
krug: nth(1 2 3, 2px);
blug: nth(a b c d, 3);
flig: comparable(34, 22px) comparable(1%, 3) comparable(2, 1) comparable(4cm, 1in);
flug: comparable(1px, 2.3in) comparable(1%, 2pt);
flib: comparable(3ex, 2px) comparable(3em, 2cm);
glib: not(fudge) not(false) not(0) not(red + green);
trib: if(red + green, yellow, not taken);
trub: if(not(fudge), not taken, here we are);
}
$width: 10px;
$height: 10px;
@media (-webkit-min-device-pixel-ratio: 2), (-moz-min-device-pixel-ratio: 2) {
div {
background-image: url(fudge);
-webkit-background-size: $width $height;
}
}
span {
@media foo {
div {
blah: blah;
}
@media bar {
p {
blah: bloo;
}
}
}
}
gudge {
fudge: 20 + "%";
mudge: 1 + blang;
}
h1:lang(en) {
foo: bar;
}
|
