1. 变量
@color: red;
2. 混合(mixin)
// 基本
.box {
width: 100px;
height: 100px;
}
.box1 {
.box
}
// 参数
.border(@width) {
border: @width solid #000;
}
.box1 {
.border(10px);
}
// 带默认值
.border_1(@width:10px) {
border: @width solid #000
}
.box2 {
.border_1();
}
3. 匹配模式
- ie中css小三角 黑底 用 dashed
- 根据调用 传那个字符, 用那种模式
// 朝上
.triangle (top, @w:5px, @c:#000) {
border-width: @w;
border-color: transparent transparent @c transparent;
border-style: dashed dashed solid dashed;
}
// 朝下
.triangle (top, @w:5px, @c:#000) {
border-width: @w;
border-color: @c transparent transparent transparent;
border-style: dashed dashed solid dashed;
}
// 默认值
.triangle (@_, @w:5px, @c: #000) {
width: 0;
height: 0;
overflow: hidden;
}
// 调用
.sanjiao {
.triangle(top);
}
4. 运算
@test: 300px;
.box {
width: (@test-10)*5;
color: #ccc-10; // #c2c2c2
}
5. 嵌套规则
<ul>
<li><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
<li><a href="">4</a></li>
</ul>
// 使用嵌套样式写法 最多不要超过五层
ul {
width: 100px;
height: 100px;
li {
height: 25px;
line-height: 25px;
}
a {
display: inline-block;
background-color: red;
}
// 上一级用 &字符
}
6. @arguments 变量
.bor_arg(@w:30px,@c:red,@style:solid) {
border: @arguments;
}
7. 避免编译
.box {
width: ~'calc(300px-30px)';
}
