mixins.less
2.06 KB
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
.mixin { border: 1px solid black; }
.mixout { border-color: orange; }
.borders { border-style: dashed; }
.mixin > * { border: do not match me; }
#namespace {
.borders {
border-style: dotted;
}
.biohazard {
content: "death";
.man {
color: transparent;
}
}
}
#theme {
> .mixin {
background-color: grey;
}
}
#container {
color: black;
.mixin;
.mixout;
#theme > .mixin;
}
#header {
.milk {
color: white;
.mixin;
#theme > .mixin;
}
#cookie {
.chips {
#namespace .borders;
.calories {
#container;
}
}
.borders;
}
}
.secure-zone { #namespace .biohazard .man; }
.direct {
#namespace > .borders;
}
.bo, .bar {
width: 100%;
}
.bo {
border: 1px;
}
.ar.bo.ca {
color: black;
}
.jo.ki {
background: none;
}
.amp {
&.support {
color: orange;
.higher {
top: 0px;
}
&.deeper {
height: auto;
}
}
}
.extended {
.bo;
.jo.ki;
.amp.support;
.amp.support.higher;
.amp.support.deeper;
}
.do .re .mi .fa {
.sol .la {
.si {
color: cyan;
}
}
}
.mutli-selector-parents {
.do.re.mi.fa.sol.la.si;
}
.foo .bar {
.bar;
}
.has_parents() {
& .underParents {
color: red;
}
}
.has_parents();
.parent {
.has_parents();
}
.margin_between(@above, @below) {
* + & { margin-top: @above; }
legend + & { margin-top: 0; }
& + * { margin-top: @below; }
}
h1 { .margin_between(25px, 10px); }
h2 { .margin_between(20px, 8px); }
h3 { .margin_between(15px, 5px); }
.mixin_def(@url, @position){
background-image: @url;
background-position: @position;
}
.error{
@s: "/";
.mixin_def( "@{s}a.png", center center);
}
.recursion() {
color: black;
}
.test-rec {
.recursion {
.recursion();
}
}
.paddingFloat(@padding) { padding-left: @padding; }
.button {
.paddingFloat(((10px + 12) * 2));
&.large { .paddingFloat(((10em * 2) * 2)); }
}
.clearfix() {
// ...
}
.clearfix {
.clearfix();
}
.clearfix {
.clearfix();
}
.foo {
.clearfix();
}