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
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
|
body {
color: hsl(34, 50%, 40%);
color: hsla(34, 50%, 40%, 0.3);
lighten: lighten(#efefef, 10%);
lighten: lighten(rgb(23, 53, 231), 22%);
lighten: lighten(rgba(212, 103, 88, 0.5), 10%);
darken: darken(#efefef, 10%);
darken: darken(rgb(23, 53, 231), 22%);
darken: darken(rgba(23, 53, 231, 0.5), 10%);
saturate: saturate(#efefef, 10%);
saturate: saturate(rgb(23, 53, 231), 22%);
saturate: saturate(rgba(23, 53, 231, 0.5), 10%);
desaturate: desaturate(#efefef, 10%);
desaturate: desaturate(rgb(23, 53, 231), 22%);
desaturate: desaturate(rgba(23, 53, 231, 0.5), 10%);
spin: spin(#efefef, 12);
spin: spin(rgb(23, 53, 231), 15);
spin: spin(rgba(23, 53, 231, 0.5), 19);
spin: spin(#efefef, -12);
spin: spin(rgb(23, 53, 231), -15);
spin: spin(rgba(23, 53, 231, 0.5), -19);
one: fadein(#abcdef, 10%);
one: fadeout(#abcdef, -10%);
two: fadeout(#029f23, 10%);
two: fadein(#029f23, -10%);
three: fadein(rgba(1,2,3, 0.5), 10%);
three: fadeout(rgba(1,2,3, 0.5), -10%);
four: fadeout(rgba(1,2,3, 0), 10%);
four: fadein(rgba(1,2,3, 0), -10%);
hue: hue(rgb(34,20,40));
sat: saturation(rgb(34,20,40));
lit: lightness(rgb(34,20,40));
@old: #34fa03;
@new: hsl(hue(@old), 45%, 90%);
what: @new;
zero: saturate(#123456, -100%);
zero: saturate(#123456, 100%);
zero: saturate(#000000, 100%);
zero: saturate(#ffffff, 100%);
zero: lighten(#123456, -100%);
zero: lighten(#123456, 100%);
zero: lighten(#000000, 100%);
zero: lighten(#ffffff, 100%);
zero: spin(#123456, -100);
zero: spin(#123456, 100);
zero: spin(#000000, 100);
zero: spin(#ffffff, 100);
}
alpha {
// g: alpha(red);
g: alpha(rgba(0,0,0,0));
g: alpha(rgb(155,55,0));
}
fade {
f: fade(red, 50%);
f: fade(#fff, 20%);
f: fade(rgba(34,23,64,0.4), 50%);
}
@a: rgb(255,255,255);
@b: rgb(0,0,0);
.mix {
color: mix(@a, @b, 50%);
}
.percent {
per: percentage(0.5);
}
// color keywords
.colorz {
color: whitesmoke - 10;
color: spin(red, 34);
}
// purposfuly whacky to match less.js
@color: #fcf8e3;
body {
start: @color;
spin: spin(@color, -10); // #fcf4e3
chained: darken(spin(@color, -10), 3%); // gives #fbeed5, should be #fbefd5
direct: darken(#fcf4e3, 3%); // #fbefd5
}
// spin around
pre {
@errorBackground: #f2dede;
spin: spin(@errorBackground, -10);
}
dd {
@white: #fff;
background-color: mix(@white, darken(@white, 10%), 60%);
}
|
