CSS预处理器-Less

CSS预处理器：定义了一种新的语言，其基本思想是，用一种专门的编程语言，为css增加一些编程的特性，将css作为目标生成文件，然后开发者就只要使用这种语言进行编码工作。它提供了一些变量、简单的使用逻辑、函数等等，优点是简化了css代码的编写，增加了维护性、可读性和适应性。

CSS预处理器的类型有：Less、Sass、Stylus等；

Sass：是对css的语法的扩充。诞生于2007年，最早的一款css预处理器语言。它可以使用变量、常量、嵌套、混入、函数等功能。写完需要编译出合法的css才能让浏览器使用，也就是说它本身的语法不是太容易让浏览器识别，因为它不是标准的css格式。

　　　　官网地址：sass-lang.com

Less：2009年开源的一个项目，比较容易上手。它提供了多种能够平滑的将写好的代码转化成标准的css代码，很多框架中常能看到它的身影(如BootStrap)。

　　　　官网地址：lesscss.cn

　　　　bootstrap中的less教程：www.bootcss.com/p/lesscss/

Less：

一、安装及调用

命令行安装(通过node.js软件包管理器npm进行)：

1 $ npm install -g less

命令行使用：

调用编译器：

1 $lessc style.less

要将css结果保存到style.css中：

1 $ lessc style.less style.css

要缩小内容，可使用插件clean-css，安装后使用--clean-css选项指定缩小的css输出：

1 $ lessc --clean-css style.less style.min.css

html内编写：导入style.less文件，(标签属性type=”text/less”)，后导入less.js文件

1 <link rel="stylesheet/less" type="text/css" href="styles.less" />
2 <script src=”less.js”></script>

less文件编译：编写代码至xxx.less文件中，使用less编译工具编译成xxx.css，在html中导入xxx.css文件

less编译工具：koala-app.com

二、编译：

注释：以//开头的，不会编译进css文件中；以/**/包裹的会直接编译进css文件中。

变量：使用@来声明一个变量，如@pink:pink;

1 作为普通属性值来使用，如：直接使用@pink;
2 作为选择器和属性名来使用，如：定义：@id:idName;使用：#@{id};
3 作为URL来使用，如：@{url}
4 变量的延迟加载，即先读取数据再调用，有块级作用域思想

嵌套规则：选择器是父子关系，子选择器可以写在父选择器内；同级(包含伪类)则得写在同一级上；在选择器样式内用”&“加伪类可以定义该选择器的伪类或伪元素；

 1 /*选择器父子关系的*/
 2 .parent{
 3     /*样式*/
 4     .child{
 5         /*样式*/
 6         &:伪类/伪元素{
 7         　　/*样式*/
 8         }
 9     }
10     .child:伪类/伪元素{
11         /*样式*/
12     }
13     &:伪类/伪元素{
14         /*样式*/
15     }
16 }

less的混合：混合式将一系列属性从一个规则集引入到另一个规则集的方式

　　　　　　　　　　定义：在less规则有明确指定，使用"."的形式来定义

 1 普通混合：将样式调用到另一个地方，集合会被输出到css上，
　　如：定义：
　　　　　　.集合名{
　　　　　　　　/*样式*/
　　　　　　}
　　　　调用：
　　　　　　.集合名;
 2 不带输出的混合：对比普通混合，不会将集合输出到css文件上，
　　如：定义：
　　　　　　.集合名()　{　
　　　　　　　　/*样式*/
　　　　　　}
　　　　调用：　
　　　　　　.集合名();
 3 带参数的混合：定义时将需要调用的形参写在括号内，在输出时按照顺序写上实参
 4 带参数并且有默认值的混合：定义时在形参后面加上冒号和值，
　　如：
　　　　.集合名(@n1:10px){
　　　　　　/*样式*/
　　　　}
 5 带多个参数的混合：多个参数(形参、实参)用“,“逗号隔开
 6 命名参数：定义时有多个参数并带默认值，只要修改其中一项参数的值时，就可以使用命名参数，在调用时括号内形参加冒号加值即可，
　　如：定义：
　　　　　　.集合名(@n:10px,@m:20px,@a:30px){
　　　　　　　　/*样式*/};
　　　　调用：
　　　　　　.集合名(@a:15px){
　　　　　　　　/*样式*/
　　　　　　}
 7 匹配模式：定义时第一个值取不同，调用时根据写不同的值来匹配与之对应的样式，
　　如：三角形方向、定位、浮动等
 8 匹配不同条件时又想匹配相同条件的样式，可以新建同名混合使用“@_“参数来表示匹配全部
 9 arguments变量：相当于数组，定义方法时里面的属性的值引用@arguments时，编译出来的css会将参数按顺序填入该位置，
　　如：
　　　　.border(@1,@2,@3){
　　　　　　border:@arguments;
　　　　}；
 　　　　#ele{
　　　　　　.border(1px,solid,black)
　　　　}
　　编译出来后就是：#ele{border:1px solid #000000}

计算：less可以进行 + - * / 等操作，也可以使用小括号进行一些更复杂的运算操作，计算时双方只需其中一方带单位即可；如：
```
1 @20+20px   
2 .ele{width:20+@widht}
```
继承：可以给多个选择器添加相同的样式；包裹在父级内的子集或伪类，父级使用继承，子集的样式同样继承；

1 /*语法*/
2 .ele:extend(.style){}
3 /*继承类的所有状态(点击、选中等)*/
4 .ele:extend(.style all){}
5 /*给选择器继承的两种方式*/
6 .ele:extend(.style){}
7 .ele{
8 　　&:extend(.style);
9 }

　　　　　　混合和继承的区别：混合是把样式复制站别到类中，继承是把相同样式的选择器变成并集选择器；继承性能比混合高，灵活性比混合低；

避免编译：在less中，有部分值不想让它编译时编译出来，想保持原样，这时候可以使用特殊的格式来避免：
```
1 background-color:~“red”;
```
外部引用：在less文件中可以在任意位置导入想导入的文件；
```
1 @import url(文件位置/文件名);
```