1、注释 //或者// 区别是//会编译到css里，而//不会
2、变量 @my_width: 300px;(@变量名:值;)
例子：
@my_width: 300px;
body{
width: @my_width;
}
3、混合(重用已存在样式)
例子
.test_div {
width: 200px;
height: 200px;
background: red;
.border;
}
.border {
border: 1px solid #000;
}
4、混合(带参数)
.test_div {
width: 200px;
height: 200px;
background: red;
.border(5px);
}
.border(@border_width) {
border: @border_width solid #000;
}
5、混合(默认参数)
.test_div {
width: 200px;
height: 200px;
background: red;
.border(5px);
}
.border(@border_width: 10px) {
border: @border_width solid #000;
}
6、匹配模式
.pos(r) {
position: relative;
}
.pos(a) {
position: absolute;
}
.pos(f) {
postition: fixed;
}
.text_div {
width: 200px;
height: 200px;
.pos(a);
}
7、运算
@test_width {
width: 300px;
}
.text_div {
width: (@test_width-50)*10;
}
8、嵌套 &代表上一层选择器
9、argunments
.test_div {
width: 200px;
height: 200px;
background: red;
.border();
}
.border(@border_width:5px,@border_style:solid,@border_color:#fff) {
border: @argunments;
}
10、避免编译(处理less编译器不识别的语法，原封不动输出)
.text_div {
width: ~'calc(300px - 30px)';
}
less小结
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
