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
155
|
#functions {
@var: 10;
@colors: #000, #fff;
color: _color("evil red"); // #660000
width: increment(15);
height: undefined("self");
border-width: add(2, 3);
variable: increment(@var);
background: linear-gradient(@colors);
}
#built-in {
@r: 32;
escaped: e("-Some::weird(#thing, y)");
lighten: lighten(#ff0000, 40%);
darken: darken(#ff0000, 40%);
saturate: saturate(#29332f, 20%);
desaturate: desaturate(#203c31, 20%);
greyscale: greyscale(#203c31);
hsl-clamp: hsl(380, 150%, 150%);
spin-p: spin(hsl(340, 50%, 50%), 40);
spin-n: spin(hsl(30, 50%, 50%), -40);
luma-white: luma(#fff);
luma-black: luma(#000);
luma-black-alpha: luma(rgba(0,0,0,0.5));
luma-red: luma(#ff0000);
luma-green: luma(#00ff00);
luma-blue: luma(#0000ff);
luma-yellow: luma(#ffff00);
luma-cyan: luma(#00ffff);
luma-white-alpha: luma(rgba(255,255,255,0.5));
contrast-filter: contrast(30%);
saturate-filter: saturate(5%);
contrast-white: contrast(#fff);
contrast-black: contrast(#000);
contrast-red: contrast(#ff0000);
contrast-green: contrast(#00ff00);
contrast-blue: contrast(#0000ff);
contrast-yellow: contrast(#ffff00);
contrast-cyan: contrast(#00ffff);
contrast-light: contrast(#fff, #111111, #eeeeee);
contrast-dark: contrast(#000, #111111, #eeeeee);
contrast-wrongorder: contrast(#fff, #eeeeee, #111111, 0.5);
contrast-light-thresh: contrast(#fff, #111111, #eeeeee, 0.5);
contrast-dark-thresh: contrast(#000, #111111, #eeeeee, 0.5);
contrast-high-thresh: contrast(#555, #111111, #eeeeee, 0.6);
contrast-low-thresh: contrast(#555, #111111, #eeeeee, 0.1);
contrast-light-thresh-per: contrast(#fff, #111111, #eeeeee, 50%);
contrast-dark-thresh-per: contrast(#000, #111111, #eeeeee, 50%);
contrast-high-thresh-per: contrast(#555, #111111, #eeeeee, 60%);
contrast-low-thresh-per: contrast(#555, #111111, #eeeeee, 10%);
format: %("rgb(%d, %d, %d)", @r, 128, 64);
format-string: %("hello %s", "world");
format-multiple: %("hello %s %d", "earth", 2);
format-url-encode: %('red is %A', #ff0000);
eformat: e(%("rgb(%d, %d, %d)", @r, 128, 64));
unitless: unit(12px);
unit: unit((13px + 1px), em);
hue: hue(hsl(98, 12%, 95%));
saturation: saturation(hsl(98, 12%, 95%));
lightness: lightness(hsl(98, 12%, 95%));
hsvhue: hsvhue(hsv(98, 12%, 95%));
hsvsaturation: hsvsaturation(hsv(98, 12%, 95%));
hsvvalue: hsvvalue(hsv(98, 12%, 95%));
red: red(#f00);
green: green(#0f0);
blue: blue(#00f);
rounded: round((@r/3));
rounded-two: round((@r/3), 2);
roundedpx: round((10px / 3));
roundedpx-three: round((10px / 3), 3);
rounded-percentage: round(10.2%);
ceil: ceil(10.1px);
floor: floor(12.9px);
sqrt: sqrt(25px);
pi: pi();
mod: mod(13m, 11cm); // could take into account units, doesn't at the moment
abs: abs(-4%);
tan: tan(42deg);
sin: sin(10deg);
cos: cos(12);
atan: atan(tan(0.1rad));
atan: convert(acos(cos(34deg)), deg);
atan: convert(acos(cos(50grad)), deg);
pow: pow(8px, 2);
pow: pow(4, 3);
pow: pow(3, 3em);
min: min(0);
min: min("junk", 6, 5);
min: min(1pc, 3pt);
max: max(1, 3);
max: max(3%, 1cm, 8%, 2mm);
percentage: percentage((10px / 50));
color: color("#ff0011");
tint: tint(#777777, 13);
tint-full: tint(#777777, 100);
tint-percent: tint(#777777, 13%);
tint-negative: tint(#777777, -13%);
shade: shade(#777777, 13);
shade-full: shade(#777777, 100);
shade-percent: shade(#777777, 13%);
shade-negative: shade(#777777, -13%);
fade-out: fadeOut(red, 5%); // support fadeOut and fadeout
fade-in: fadein(fadeout(red, 10%), 5%);
hsv: hsv(5, 50%, 30%);
hsva: hsva(3, 50%, 30%, 0.2);
mix: mix(#ff0000, #ffff00, 80);
mix-0: mix(#ff0000, #ffff00, 0);
mix-100: mix(#ff0000, #ffff00, 100);
mix-weightless: mix(#ff0000, #ffff00);
mixt: mix(#ff0000, transparent);
.is-a {
color: iscolor(#ddd);
color1: iscolor(red);
color2: iscolor(rgb(0, 0, 0));
color3: iscolor(transparent);
keyword: iskeyword(hello);
number: isnumber(32);
string: isstring("hello");
pixel: ispixel(32px);
percent: ispercentage(32%);
em: isem(32em);
cat: isunit(32cat, cat);
}
}
#alpha {
alpha: darken(hsla(25, 50%, 50%, 0.6), 10%);
alpha2: alpha(rgba(3, 4, 5, 0.5));
alpha3: alpha(transparent);
}
#blendmodes {
multiply: multiply(#f60000, #f60000);
screen: screen(#f60000, #0000f6);
overlay: overlay(#f60000, #0000f6);
softlight: softlight(#f60000, #ffffff);
hardlight: hardlight(#f60000, #0000f6);
difference: difference(#f60000, #0000f6);
exclusion: exclusion(#f60000, #0000f6);
average: average(#f60000, #0000f6);
negation: negation(#f60000, #313131);
}
#extract-and-length {
@anon: A B C 1 2 3;
extract: extract(@anon, 6) extract(@anon, 5) extract(@anon, 4) extract(@anon, 3) extract(@anon, 2) extract(@anon, 1);
length: length(@anon);
}
|
