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
|
/*
Guards
*/
.inner(@index) {
width: @index * 1px;
}
.sign (@index) when (@index > 0) {
.inner(@index);
}
.sign (@index) when (@index < 0) {
height: @index;
}
.sign (@index: 0) when (@index = 0) {
padding: @index;
}
.a {
.sign(1px);
.sign(-1px);
.sign(0);
// No arg
.sign();
.sign;
}
// condition list
.mixin1 (@a) when (@a > 10), (@a < -10) {
margin: @a;
}
.b{
.mixin1(11);
.mixin1(-11);
}
.eq (@a, @b) when (@a < @b) and (@b = @a) {
}
.max (@a, @b) when (@a > @b) {
width: @a
}
.max (@a, @b) when (@a < @b) {
height: @b
}
.c {
.max(3px, 5px);
.max(5px, 3px);
}
@media1: mobile;
.mmixin (@a) when (@media1 = mobile) {
src: 'mobile';
padding: @a;
}
.mmixin (@a) when (@media1 = desktop) {
src: 'desktop';
padding: @a * 3px;
}
.d {
.mmixin(1px);
}
/*
isType functions
*/
.mixtype (@a, @b: 0) when (isnumber(@b)) {
width: @b;
}
.mixtype (@a, @b: black) when (iscolor(@b)) {
color: @b;
}
.mixtype (@a, @b: 'http://www.lesscss.org') when (isurl(@b)) {
src: @b;
}
.mixtype (@a, @b: 'somestr') when (isstring(@b)) {
filter: @b;
}
.mixtype (@a, @b: 'somestr') when (iskeyword(@b)) {
ignore: @b;
}
.e {
.mixtype (6px, 9px);
.mixtype (6px, yellow);
.mixtype (6px, 'http://www.lesscss.org/#-parametric-mixins');
.mixtype (6px, 'wtf');
.mixtype (6px, when);
}
/*
Mixed conditions
*/
.mixcond (@a) when (isnumber(@a)) and (@a > 0) {
width: @a;
}
/*
.mixcond (@a) when (isnumber(@a)) and (@a = 0) {
margin: @a;
}
*/
.mixcond (@b) when not (@b > 0) {
height: @b;
}
.f {
.mixcond(9px);
// .mixcond(0);
.mixcond(-9px);
}
/*
Bootstrap example
*/
.span(@index) {
width: @index * 1px;
}
.spanX (@index) when (@index > 0) {
.span@{index} {
.span(@index);
}
}
.a {
.spanX(5);
}
|
