blob: 3f4af2c7d1864e11d398581eb0b34d92dde4a79d (
plain)
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
|
.unary {
// all operators are parsable as unary operators, anything
// but - throws an error right now though,
// this gives two numbers
sub: 10 -5;
// add: 10 +5; // error
// div: 10 /5; // error
// mul: 10 *5; // error
}
.spaces {
// we can make the parser do math by leaving out the
// space after the first value, or putting spaces on both sides
sub: 10-5;
sub: 10 - 5;
add: 10+5;
add: 10 + 5;
// div: 10/5; // this wont work, read on
div: 10 / 5;
mul: 10*5;
mul: 10 * 5;
}
// these properties have divison not in parenthases
.supress-division {
border-radius: 10px / 10px;
border-radius: 10px/10px;
border-radius: hello (10px/10px) world;
@x: 10px;
font: @x/30 sans-serif;
font: 10px / 20px sans-serif;
font: 10px/20px sans-serif;
border-radius:0 15px 15px 15px / 0 50% 50% 50%;
}
.parens {
// if you are unsure, then just wrap the expression in parentheses and it will
// always evaluate.
// notice we no longer have unary operators, and these will evaluate
sub: (10 -5);
add: (10 +5);
div: (10 /5);
div: (10/5); // no longer interpreted as the shorthand
mul: (10 *5);
}
.keyword-names {
// watch out when doing math with keywords, - is a valid keyword character
@a: 100;
@b: 25;
@a-: "hello";
height: @a-@b; // here we get "hello" 25, not 75
}
.negation {
hello: -(1px);
hello: 0-(1px);
@something: 10;
hello: -@something;
}
// and now here are the tests
.test {
single: (5);
single: 5+(5);
single: (5)+((5));
parens: (5 +(5)) -2;
// parens: ((5 +(5)) -2); // FAILS - fixme
math: (5 + 5)*(2 / 1);
math: (5+5)*(2/1);
width: 2 * (4 * (2 + (1 + 6))) - 1;
height: ((2+3)*(2+3) / (9-4)) + 1;
padding: (2px + 4px) 1em 2px 2;
@var: (2 * 2);
padding: (2 * @var) 4 4 (@var * 1px);
width: (@var * @var) * 6;
height: (7 * 7) + (8 * 8);
margin: 4 * (5 + 5) / 2 - (@var * 2);
}
.percents {
color: 100 * 10%;
color: 10% * 100;
color: 10% * 10%;
color: 100px * 10%; // lessjs makes this px
color: 10% * 100px; // lessjs makes this %
color: 20% + 10%;
color: 20% - 10%;
color: 20% / 10%;
}
.misc {
x: 10px * 4em;
y: 10 * 4em;
}
|
