Less 基础

Less 是一门 CSS 扩展语言，也叫CSS预处理器
在css的语法基础上，引入了变量、Mixin（混入）、运算以及函数等功能

Less中文网

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
• 运算是先不带单位运算完后再加单位
• 如果两个值之间只有一个值有单位，则运算结果就取该单位
• 对于两个不同的单位的值之间的运算，运算结果的值取第一个值的单位

如果表达式不能正常编译计算结果，给表达式加上括号()