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
|
@map: {
@width: 400px;
@colors: {
toolbar-background: red;
toolbar-foreground: inherit;
}
};
#ns {
.mixin() {
@height: 200px;
}
}
@breakpoints: {
mobile: 320px;
tablet: 768px;
desktop: 1024px;
};
@media (min-width: @breakpoints[mobile]) {
.toolbar {
width: @map[@width];
height: #ns.mixin[@height];
background: @map[@colors][toolbar-background];
color: @map[@colors][toolbar-foreground];
}
}
// !important after map usage
// https://github.com/less/less.js/issues/3430
@margins: {
zero: 0;
ten: 10px;
}
.cell {
margin: @margins[zero] @margins[ten]/2 !important;
}
.mixin(@color: black; @margin: 10px; @padding: 20px) {
color: @color;
margin: @margin;
padding: @padding;
width: @margins[zero] !important
}
.class1 {
.mixin(@margin: 20px; @color: #33acfe) !important;
}
.class2 {
.mixin(#efca44; @padding: 40px 10px);
}
|
