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
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
|
body {
color:rgb(red(#f00), red(#0F0), red(#00f));
color:rgb(red(#f00), green(#0F0), blue(#00f));
color:rgb(red(#0ff), green(#f0f), blue(#ff0));
color: hsl(34, 50%, 40%);
color: hsla(34, 50%, 40%, 0.3);
lighten1: lighten(#efefef, 10%);
lighten2: lighten(rgb(23, 53, 231), 22%);
lighten3: lighten(rgba(212, 103, 88, 0.5), 10%);
darken1: darken(#efefef, 10%);
darken2: darken(rgb(23, 53, 231), 22%);
darken3: darken(rgba(23, 53, 231, 0.5), 10%);
saturate1: saturate(#efefef, 10%);
saturate2: saturate(rgb(23, 53, 231), 22%);
saturate3: saturate(rgba(23, 53, 231, 0.5), 10%);
desaturate1: desaturate(#efefef, 10%);
desaturate2: desaturate(rgb(23, 53, 231), 22%);
desaturate3: desaturate(rgba(23, 53, 231, 0.5), 10%);
spin1: spin(#efefef, 12);
spin2: spin(rgb(23, 53, 231), 15);
spin3: spin(rgba(23, 53, 231, 0.5), 19);
spin2: spin(#efefef, -12);
spin3: spin(rgb(23, 53, 231), -15);
spin4: spin(rgba(23, 53, 231, 0.5), -19);
one1: fadein(#abcdef, 10%);
one2: fadeout(#abcdef, -10%);
two1: fadeout(#029f23, 10%);
two2: fadein(#029f23, -10%);
three1: fadein(rgba(1,2,3, 0.5), 10%);
three2: fadeout(rgba(1,2,3, 0.5), -10%);
four1: fadeout(rgba(1,2,3, 0), 10%);
four2: 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;
zero1: saturate(#123456, -100%);
zero2: saturate(#123456, 100%);
zero3: saturate(#000000, 100%);
zero4: saturate(#ffffff, 100%);
zero5: lighten(#123456, -100%);
zero6: lighten(#123456, 100%);
zero7: lighten(#000000, 100%);
zero8: lighten(#ffffff, 100%);
zero9: spin(#123456, -100);
zeroa: spin(#123456, 100);
zerob: spin(#000000, 100);
zeroc: spin(#ffffff, 100);
}
alpha {
// g: alpha(red);
g1: alpha(rgba(0,0,0,0));
g2: alpha(rgb(155,55,0));
}
fade {
f1: fade(red, 50%);
f2: fade(#fff, 20%);
f3: fade(rgba(34,23,64,0.4), 50%);
}
@a: rgb(255,255,255);
@b: rgb(0,0,0);
.mix {
color1: mix(@a, @b, 50%);
color2: mix(@a, @b);
color3: mix(rgba(5,3,1,0.3), rgba(6,3,2, 0.8), 50%);
}
.contrast {
color1: contrast(#000, red, blue);
color2: contrast(#fff, red, blue);
}
.percent {
per: percentage(0.5);
}
// color keywords
.colorz {
color1: whitesmoke - 10;
color2: spin(red, 34);
color3: spin(blah);
}
// 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%);
}
// math
.ops {
c1: red * 0.3;
c2: green / 2;
c3: purple % 7;
c4: 4 * salmon;
c5: 1 + salmon;
c6: 132 / red;
c7: 132 - red;
c8: 132- red;
}
.transparent {
r: red(transparent);
g: green(transparent);
b: blue(transparent);
a: alpha(transparent);
}
|