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
| body{font-size: 20px;}
/*我是被编译的*/
//我是不被编译的
/*变量*/
@testWidth:300px;
.div{width: @testWidth}
/*混合 就是复用别的样式，加入自己独特的样式，DIV1的样式和DIV基本一样，多了个border*/
.border{border:5px solid #000}
.div1{
height:29px;
.div;
.border;
}
/*混合带参数*/
.border2(@border_width)
{
border:@border_width solid #ccc;
}
.div3{
.border2(25px)
}
/*混合带默认参数*/
.border3(@border_width:10px)
{
border: @border_width solid #ccc;
}
.div4{
.border3()
}
/*css3兼容性混合列子*/
.borderRadius(@radius:5px)
{
-webkit-border-radius:@radius;
-moz-border-radius: @radius;
border-radius: @radius;
}
.div5{
height: 30px;
width: 30px;
.borderRadius(3px);
}
/*三角*/
.triangle(top,@w:15px,@c:#ccc )
{
border-width:@w;
border-color:transparent transparent @c transparent;
border-style:dashed dashed solid dashed;
}
.triangle(bottom,@w:15px,@c:#ccc )
{
border-width:@w;
border-color:@c transparent transparent transparent;
border-style:solid dashed dashed dashed;
}
.triangle(left,@w:15px,@c:#ccc )
{
border-width:@w;
border-color:transparent @c transparent transparent;
border-style:dashed solid dashed dashed;
}
.triangle(right,@w:15px,@c:#ccc )
{
border-width:@w;
border-color:transparent transparent transparent @c;
border-style:dashed dashed dashed solid;
}
//@_ 代表无论上边选了谁，都带着这个内容
.triangle(@_,@w:15px,@c:#ccc)
{
width: 0;
height:0;
overflow: hidden;
}
//调用
.sanjiao{
.triangle(bottom,30px,red);
}
/*运算*/
@test:300px;
.test{
width: @test+20*5;
}
/*嵌套*/
.list{
width: 600px;
li{
float:left;
p{
width:100px;
};
&_content{
color:red;
}
}
a{
text-align: center;
//&代表他的上一层选择器
&:hover{
color:red;
}
}
.ly{
width: 111px;
&_ly{
width: 121px;
}
}
}
/*避免编译，比如calc这种*/
.cc{
width: calc(300px-30px);
}
.cc{
width: ~'calc(300px-30px)';
}
|