less官方文档
一、less运算
加减乘可直接书写计算表达式;
触发需添加小括号或 . ,若表达式存在多个单位,以第一个单位为准。
.box {
width: 100 * 2px;
height: (100 / 2)px;
}
二、less嵌套
less的书写模仿了HTML组织结构,更加清晰;
可快速生成后代选择器;
用&便是当前选择器,不会生成后代选择器,通常配合伪类或伪元素使用。
父选择器 {
子选择器 {
css属性
}
}
.father {
&:hover {}
}
等价于
.father {
.father:hover {}
}
三、less变量
less变量是定义了一个容器,用于存储数据,方便使用和修改。
1、定义变量
@变量名: 数据
2、使用变量
css属性: 变量名
@bgColor: {
background-color: pink;
}
.box {
background-color: @bgColor;
}
四、less导入
导入less公共样式文件==>@import "文件路径";
如果是less文件,在导入的时候可以省略后缀名.less。
五、less导出
在less文件的第一行添加//out:xxx,即可配置对应的css文件信息(导出位置、文件名等)。
// 禁止导出
//out: false
// 仅配置导出路径
//out: ./css/
// 配置路径+文件名
//out: ./css/index.css