这是我参与「第四届青训营」笔记创作活动的第5天。由于在大项目中，使用了less来编写页面样式，因此在这介绍一下less的一些基本用法，可以快速入门less，使用less让样式代码更加简洁，可读性更高。

Less基础

介绍了Less中一些常用的基础写法，包括变量、mixin混入、嵌套、运算、命名空间和导入等。

less中可以定义变量 @变量名：值；

将一组属性从一个规则集混入另一个规则集

.box1{
    color:read;
    padding:10px;
}
.box2{
    //将box1的内容混入box2
    .box1()
}

less中，可以在一个选择器内部嵌套另一个选择器，这样使得代码更加简洁，而且模仿了html结构，阅读起来更加清晰。

还可以对伪类选择器进行嵌套写法，如：&:after这里的&表示对父级选择器的引用。虽然写法上是嵌套的，但实际上并没有使用CSS的嵌套：

算术运算符 +、-、*、/ 可以对任何数字、颜色或变量进行运算。如果可能的话，算术运算符在加、减或比较之前会进行单位换算。计算的结果以最左侧操作数的单位类型为准。如果单位换算无效或失去意义，则忽略单位。无效的单位换算例如：px 到 cm 或 rad 到 % 的转换。

转义（Escaping）允许使用任意字符串作为属性或变量值。

避免混入的规则集名字与HTML中的元素名字冲突，造成意外污染

// 加上()
.box1(){
    color:read;
    padding:10px;
}
.box2{
    //将box1的内容混入box2
    .box1()
}

从 Less 3.5 版本开始，还可以将混合（mixins）和规则集（rulesets）作为一组值的映射（map）使用。即可以提取混合中的某个属性对应的值，作为变量插入规则集：#mixins[name]

#colors() { 
    primary: blue; 
    secondary: green; 
} 
.button { 
    color: #colors[primary]; 
    border: 1px solid #colors[secondary]; 
}

编译后的效果：

.button { 
    color: blue; 
    border: 1px solid green; 
}

Less 中的作用域与 CSS 中的作用域非常类似。首先在本地查找变量和混合（mixins），如果本地找不到，则去“父”级作用域中查找。

@var: red; 
#page { 
    @var: white; 
    #header { 
        color: @var; // white 
    } 
}

与 CSS 自定义属性一样，混合（mixin）和变量的定义不必在引用之前事先定义。因此，下面的 Less 代码示例和上面的代码示例是相同的：

@var: red; 
#page { 
    #header { 
        color: @var; // white 
    } 
    @var: white; 
}

引入公共的less文件。 “导入”的工作方式和你预期的一样。你可以导入一个 .less 文件，此文件中的所有变量就可以全部使用了。如果导入的文件是 .less 扩展名，则可以将扩展名省略掉。

Less基础 ｜ 青训营笔记