CSS预处理器Less

官网：https://less.bootcss.com/

一、what is Less？

• Less是一种动态样式语言，属于CSS预处理器的范畴，它扩展了CSS语言
• 增加了变量、Mixin、含糊等特性，是CSS更易维护和扩展
• Less既可以在客户端上运行，也可以借助Node.js在服务器运行

CSS预处理器是一个能让你通过预处理器自己独有的语法来生成CSS的程序。

绝大多数预处理器会增加一些原生CSS不具备的特性，例如代码混合，嵌套选择器，继承选择器等，这些特性让CSS的结构更加具有可读性且易于维护。

二、Use Less

1. 安装和使用

在Node.js环境中使用Less（命令行）

npm install -g less

将less文件转为css文件：

lessc style.less style.css

• 在VSCode里面安装插件，会自动将Less文件转化为Css文件

在浏览器环境中使用Less（导入文件）

<link rel="stylesheet/less" type="text/css" href="style.css"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.11.1/less.min.js">script>

2. 注释

• 以 // 开头的注释，不会被编译到css文件中
• 以 /**/ 包裹的注释会被编译到css文件中

3. 变量

使用@来声明一个变量

1. 作为普通属性的值来使用：直接用**@XXX**
2. 做为普通选择器来使用：**#@{selector的值}**的形式
3. 作为URL：@{URL}
4. 变量的延迟加载（存在块级作用域的概念，等块里面的代码都加载完后再去执行和寻找@变量）

@color:pink;
@m:margin;     //定义属性名
@selector:.box;   //定义选择器变量
*{
    @{m}:0;
    padding:0;
}
@{selector}{
    width:100px;
    background:@olor;
}

编译过后：

* {
  margin: 0;
  padding: 0;
}
.box {
  width: 100px;
  background: pink;
}

关于变量的延迟加载：

@var:0;
.class{
    @var:1;
    .brass{
        @var:2;
        three: @var;  //3，这里会输出3
        @var:3;
    }
    one: @var;
}
//这里假设three和one是属性

4. 嵌套

1. 基本嵌套规则
2. &的使用：&只表示它的父级

基本嵌套：

#father {
    color:white;
    .son1{
        font-size:10px;
    }
    .son2{
        background:black;
    }
}

转换为css：

#father {
  color: white;
}
#father .son1 {
  font-size: 10px;
}
#father .son2 {
  background: black;
}

&使用

#father {
    color:white;
    .son{
        font-size:10px;
        &:hover{   //在这里&表示它的腹肌
            font-size:20px;
        }
    }
}

编译后：

#father {
  color: white;
}
#father .son {
  font-size: 10px;
}
#father .son:hover {
  font-size: 20px;
}

5. 混合Mixins

类似于函数，但不是函数

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

1. 普通混合
2. 不带输出的混合
3. 带参数的混合
4. 带参数并且有默认值的混合
5. 带多个参数的混合
6. 命名参数
7. 匹配模式
8. arguments变量

（1）普通混合：

会编译到原生CSS里面

.thismixin{
    font-size:20px;
}
.father{
    color:white;
    .thismixin();  //使用括号形式，也可以不使用括号，但推荐使用括号
}

编译后：

.thismixin {
  font-size: 20px;
}
.father {
  color: white;
  font-size: 20px;
}

（2）不带输出的混合

我们不想在css里面出现我们定义的混合属性，可以在定义时给他加上括号。

.seemixin{
    color:white;
}
//不带输出的混合
.nomixin(){
    width:10px;
    height:10px;
}
.father{
    font-size:10px;
    .seemixin();
    .nomixin();
}

编译后：

.seemixin {
  color: white;
}     /*这里不带输出的混合就不见啦*/
.father {
  font-size: 10px;
  color: white;
  width: 10px;
  height: 10px;
}

（3）带参数的混合

多个参数或一个参数：

.mixins1(@col){
    color:@col;
}
.mixins2(@col,@size){
    background-color:@col;
    font-size:@size;
}
.son{
    .mixins1(red);
    .mixins2(blue,20px);
}

编译后：

.son {
  color: red;
  background-color: blue;
  font-size: 20px;
}

（4）带参数默认值的混合

.mixins2(@col:red,@size:10px){
    background-color:@col;
    font-size:@size;
}
.son{
    .mixins2();
}

编译后：

.son {
  background-color: red;
  font-size: 10px;
}

（5）带多个参数的混合

定义多个具有相同名称和参数数量的 mixin 是合法的。Less 将使用所有可以应用的属性。如果你使用带有一个参数的 mixin，例如.mixin(green);，那么所有带有一个强制参数的 mixin 的属性都将被使用

.mixin(@color) {
    color-1: @color;
}
.mixin(@color; @padding: 2) {
    color-2: @color;
    padding-2: @padding;
}
.mixin(@color; @padding; @margin: 2) {
    color-3: @color;
    padding-3: @padding;
    margin: @margin @margin @margin @margin;
}
.some .selector div {
    .mixin(#008000);
}

编译后：

.some .selector div {
  color-1: #008000;
  color-2: #008000;
  padding-2: 2;
}

（6）命名参数

mixin 引用可以按名称提供参数值，而不仅仅是位置。任何参数都可以通过其名称引用，并且它们不必按任何特殊顺序排列

带上参数的名字然后赋值就不用考虑顺序了。

.mixin(@color: black; @margin: 10px; @padding: 20px) {
  color: @color;
  margin: @margin;
  padding: @padding;
}
.class1 {
  .mixin(@margin: 20px; @color: #33acfe);  //带上参数的名字然后赋值就不用考虑顺序了
}
.class2 {
  .mixin(#efca44; @padding: 40px);
}

编译后：

.class1 {
  color: #33acfe;
  margin: 20px;
  padding: 20px;
}
.class2 {
  color: #efca44;
  margin: 10px;
  padding: 40px;
}

（7）模式匹配

希望根据传递给他的参数来更改mixin的行为。

这个例子中我们希望通过传递一个参数来判断是否执行的是变亮或者是变暗的操作。

• 前面的两个mixin是抽出了不同的部分，简化代码
• 后面的@_是任何值都可以匹配
• 这三个必须是同名的混合

//下面两个相当于是模式
.mixin(dark; @color) {
  color: darken(@color, 10%);
}
.mixin(light; @color) {
  color: lighten(@color, 10%);
}
//上面两个相当于是模式
//下面抽出了公共的部分
.mixin(@_; @color) {
  display: block;
}
.my{
    .mixin(light,green);  //进行模式匹配
}

编译后：

.my {
  color: #00b300;  /*绿色*/
  display: block;
}

（8）arguments变量

它包含调用mixin时传递的所有参数。如果你比较懒的话，直接写arguments参数就可以了

.mixin(@x,@y,@blur,@color){
    box-shadow:@arguments;  //懒人操作
}
.box{
    .mixin(10px,10px,1px,blue);
}

编译后：

.box {
  box-shadow: 10px 10px 1px blue;
}

6. 运算

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

// 所有操作数被转换成相同的单位
@conversion-1: 5cm + 10mm; // 结果是 6cm
@conversion-2: 2 - 3cm - 5mm; // 结果是 -1.5cm

// conversion is impossible
@incompatible-units: 2 + 5px - 3cm; // 结果是 4px

// example with variables
@base: 5%;
@filler: @base * 2; // 结果是 10%
@other: @base + @filler; // 结果是 15%

关于calc()

为了与 CSS 保持兼容，calc() 并不对数学表达式进行计算，但是在嵌套函数中会计算变量和数学公式的值。

@var: 50vh/2;
width: calc(50% + (@var - 20px));  // 结果是 calc(50% + (25vh - 20px))

7. 映射

#colors() {
  primary: blue;
  secondary: green;
}

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

编译后;

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

8. @import 规则

在less中 @import规则可以在任何地方

.foo {
  background: #900;
}
@import "hhh.less";

数学公式的值。

@var: 50vh/2;
width: calc(50% + (@var - 20px));  // 结果是 calc(50% + (25vh - 20px))

7. 映射

#colors() {
  primary: blue;
  secondary: green;
}

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

编译后;

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

8. @import 规则

在less中 @import规则可以在任何地方

.foo {
  background: #900;
}
@import "hhh.less";