变量
使用@符号声明变量
公共样式,可以提取出变量,在多个地方使用,便于维护。
@primary-color: #268DFF; //主色
.box1 {
color: @primary-color;
}
.box2 {
width: 100px;
height: 100px;
background-color: @primary-color;
}
编译为
.box1 {
color: #268DFF;
}
.box2 {
width: 100px;
height: 100px;
background-color: #268DFF;
}
嵌套
.box {
.text {
color: blue;
}
.text2 {
color: red;
}
}
编译为
.box .text {
color: blue;
}
.box .text2 {
color: red;
}
父级选择器
使用 & 引用父选择器
&操作符代表嵌套规则的父选择器,最常用在对现有选择器应用修改类或伪类时
.text {
color: blue;
&:hover {
color: pink;
}
}
编译为
.text {
color: blue;
}
.text:hover {
color: pink;
}
运算
算术运算符 +、-、*、/ 可以对任何数字、颜色或变量进行运算
@width: 200px;
@height: 500px;
@bgColor: #123456;
@color: red;
.box {
width: @width + 2;
height: (@height / 2);
background: @bgColor * 2;
color: @color - 2;
}
编译为
width: 202px;
height: 250px;
background: #2468ac;
color: #fd0000;
- 运算符中间左右必须有空格隔开 1px + 5;
- 对于两个不同单位值之间的运算,运算结果的值会取第一个值的单位 5px + 10em,单位就是px
- 如果两个值之间只有一个值有单位,则运算结果就取该单位
mixin合并
- 可以把 class 选择器 和 id 选择器混入到其他样式中。例如:
.border {
border: 1px solid red;
}
.box1 {
.border;
}
编译为
.border {
border: 1px solid red;
}
.box1 {
border: 1px solid red;
}
- 带参数的混入
.border-radius (@radius: 1px) {
border-radius: @radius
}
.box1 {
.border-radius(10px);
}
编译为
.box1 {
border-radius: 10px;
}