CSS的预处理器---[Less]

CSS的预处理器---[Less]

Less中文网址:http://lesscss.cn/
常见的CSS预处理器:Sass、Less、Stylus

1.Less使用

我们首先新建一个后缀名为less的文件，在这个less文件里面书写less语句。

2.Less变量

变量是指没有固定的值，可以改变的。因为我们CSS中的一些颜色和数值等经常使用。

	@变量名:值;	

变量命名规范

• 必须有@为前缀
• 不能包含特殊字符
• 不能以数字开头
• 大小写敏感

//定义一个蓝色的变量
@color: blue;
//错误的变量名 @1color @color~@#
//变量名区分大小写 @color 和 @Color 是两个不同的变量
//定义了一个字体为14像素的变量
@font14: 14px;
body {
	background-color: @color;
}
div {
	color: @color;
	font-size: @font14;
}
a {
	font-size: @font14;
}

3.Less编译

本质上，Less包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的CSS文件。
所以，我们需要把我们的less文件，编译生成为css文件，这样我们的html页面才能使用。

4.Less嵌套

如果遇见（交集 | 伪类 | 伪元素选择器）

• 内层选择器的前面没有&符号，则它被解析为父选择器的后代;

• 如果有&符号，它就被解析为父元素自身或父元素的伪类。

  a : hover{
  	color: red;
  }
  

  Less嵌套写法:

a {
	& : hover{
		color: red;
	}
}

5. Less运算

任何数字、颜色或者变量都可以参与运算。就是Less提供了加(+)、减(-)、乘(*)、除(/)算术运算。

/*Less 里面写*/
@witdh: 10px + 5;
div {
	border: @witdh solid red;
}
/*生成的css* /
div {
	border: 15px solid red;
}
/*Less 甚至还可以这样*/
width: (@width + 5) * 2;

注意：

• 乘号(*)和除号(/ )的写法
• 运算符中间左右有个空格隔开1px + 5
• 对于两个不同的单位的值之间的运算，运算结果的值取第一个值的单位
• 如果两个值之间只有一个值有单位，则运算结果就取该单位