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 变量的延迟加载，即先读取数据再调用，有块级作用域思想

• 嵌套规则：选择器是父子关系：子选择器可以写在父选择器内；同级(包含伪类)则得写在同一级上
• 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 @width:20+20px   
  2 .ele{width:20+@widht}

• 外部引用：@import “文件位置/文件名”;

CSS预处理器-Less

原文：https://www.cnblogs.com/miao91/p/13229643.html