less 随手记

本文是 css 的预处理语言 less 的学习笔记，简单记录 less 的用法及知识点；

使用

less 可以同css 一样，直接在style 标签中写，或单独存储 .less 文件 ， 在 html 文件的head 标签中引用。
注意：link 标签一定要在 script 标签前边，rel="stylesheet/less"
在 浏览器中，直接使用需要在head 标签中引入文件 less.js

<script src="https://cdnjs.cloudflare.com/ajax/libs/less.js/3.0.4/less.min.js"></script>

在 node 中 通过 npm 安装
webpack中需要配合 less-loader 使用；

变量

普通值变量

变量定义采用 @ 变量名 的形式，变量值不需要加引号 @color：#333；
变量引用直接在属性后用 @ 变量名 #wrap { color：@color；}
项目中，可以单独将常用变量封装在一个文件中，方便后期维护或更新。

选择器变量

选择器变量就是将 class 名或 id 名 声明为变量，可以只赋值 class 或 id 名，也可带有选择符；
如： @selector：#wrap 引用时直接 @{变量名} 即可；
如果变量值只是名，那么引用时需要添加选择符， 如 @Wrap：wrap； 用时： .@ {wrap}

url 变量

用于图片或者是文件路径，定义方式相同，但变量值需要加引号 @images："…/img" ;
使用时 @{变量名}； background:url(@{images}/dog.png)；

声明变量

声明变量的结构是 @name:{属性：值；} ，即一句样式代码或一段样式代码；
使用时 @name（）； 类似于方法调用；

变量运算

加减法运算时，以第一个数据的单位为基准；
乘除法时，单位必须统一；

变量作用域

就近原则，一个 {} 为一个作用域； {} 里的变量调用时先查找 {} 里边，如果没有从外边查找；

嵌套

普通嵌套

按照html 文档中的 dom 节点层级来进行嵌套。

& 的作用

&： 代表的上一层选择器的名字，就是父级元素；

媒体查询

对于媒体查询，css 中媒体查询的样式和单独的样式需要分开写，less 则不用；直接在 {} 中写媒体查询样式；

混合

普通混合

混合定义 .car {//一些样式} ，这种混合会编译到生成的css 文件中，无用而且造成 css 文件变大。所以不建议使用这种混合；

无参数的混合

混合定义 .car {//一些样式} 与 .car(){//一些样式} 两种混合是等价的，为了避免混淆，建议后者写法；而且后者写法不会再编译进生成的css 文件；
调用时也是， .car; 与 .car(); 等价；
混合的前缀，. 与 # 皆可，看个人习惯.

默认参数的混合

混合可以有默认参数，如果混合调用时没有参数，可使用默认参数；
传入的参数必须有单位；
@arguments 指代的是全部参数。

命名参数

在调用混合的时候传入带变量名称，这样可以直接将这个变量值覆盖；

匹配模式

调用时，会从第一个参数匹配，选取匹配程度最高的，如果这些混合的匹配程度都相同，那么就全部选择，出现样式覆盖替换，编译后的样式所有包含所有混合样式。
如果匹配的参数是变量，则匹配，

arguments

方法使用 important！

在混合名后边加上 ！important ，就会为混合中的所有属性添加上 ！important；

继承

extend 是less 的一个伪类，使用后，当前的元素可以继承所匹配的元素的全部声明样式；
使用方法，在继承元素中 &：extend（被继承元素）

all 全局搜索替换

会将所i匹配的元素的全部样式复制一份
继承与方法最大的区别就是 继承不重新声明自己的样式，只是将需要继承的元素添加在被继承的元素的样式声明，而 方法，需要重新声明自己的样式。节约了代码，减少代码重复。

导入

导入less 文件，可省略后缀 import “main” 等价于 import “main.less”
import 的位置没有强制要求放在文档开头，可以随意防止，

导入文件的特性

1. reference 特性，使用引入的less 文件，但是不会编译到最终的输出中。
2. once @import 语句的默认行为。这表明相同的文件只会被导入一次，之后再导入的就都不会解析。
3. multiple 允许导入多个同名文件。

函数

1. 判断类型函数
   isnumber()
   iscolor()
   isurl()

2. 颜色操作
   saturate() 增加饱和度
   lighten（）增加颜色亮度
   darken（）降低颜色亮度
   fade（）给颜色设置透明度
   mix（）根据比例混合两种颜色

3. 数学函数
   ceil （）向上取整
   floor（）向下去整
   percentage（）将浮点数转换为百分比字符串
   round（）四舍五入
   sqrt（）计算一个数的平方根
   abs（）数的绝对值
   pow（）计算乘方
   更多参数请查看less 函数

注释

// 单行注释，不会在编译后的css 文件中显示。
/**/ 多行注释，会在编译后的css 文件显示。

避免编译

#wrap{
    width:~"calc(200px + 700px)";
}

通过这种方式，就不会进行编译。