Less 是一门 CSS 扩展语言,也叫CSS预处理器
在css的语法基础上,引入了变量、Mixin(混入)、运算以及函数等功能
Less是一门 CSS 预处理语言,它扩展了CSS的动态特性
Less 安装
- 基于 nodejs 在线安装Less,使用cmd命令
npm install -g less
- 检查是否安装成功,使用cmd命令
lessc -v
查看版本即可
注释
- 以//开头的注释,不会被编译到css文件中
- 以/**/包裹的注释会被编译到css文件中
Less 变量
变量是指没有固定的值,可以改变,如css中的:颜色和数值
// 1. 作为普通属性
@变量名: 值;
// 2. 作为选择器、属性名或者URL
@{选择器名} {
@{属性名}: @{url地址}
}
例如:
@color-red: red
@div: d
@w: width
@url: '/a/b/c.png'
@{d} {
@{w}: 100px;
color: @color-red;
background: url(@{url});
}
变量命名规范
- 必须有@为前缀
- 不能包含特殊字符
- 不能以数字开头
- 大小写敏感
Less 编译
Less 嵌套
Less 运算
任何数字、颜色或者变量都可以参与运算。Less提供了加(+)、减(-)、乘(*)、除(/)算术运算。
注意
运算符中间左右有个空格隔开
,如:1px + 5- 运算是先不带单位运算完后再加单位
- 如果两个值之间只有一个值有单位,则运算结果就取该单位
- 对于两个不同的单位的值之间的运算,运算结果的值取第一个值的单位
如果表达式不能正常编译计算结果,给表达式加上括号()