Css预处理语言之Less

• Less 是一门 CSS 预处理语言，它扩展了 css 语言，增加了变量、Mixin、函数等特性，使得 css 更易维护和扩展。
• Less 可以运行在 Node 或者浏览器端

• Less 支持变量和嵌套

  npm转义less文件

• npm root -g 该命令可以输出全局的依赖包所在的位置

• npm i less 下载 less 依赖包
  • lessc index.less index.css 该命令转义 less 文件
• package.json 配置文件里边可以在”scripts”属性中 自定义脚本。

  一、less支持变量

  1、样式的变量

  // less 支持变量和嵌套
  // 1、样式的变量
  @width:200px;
  @bg:green;
  @bg2:red;
  #box {
  width: @width;
  height: 200px;
  background: @bg;
  }

  2、选择器的变量

  // 2、选择器的变量
  @name:#box .container;
  @{name} {
  width: @width;
  height: 200px;
  background: @bg2;
  }
  @url: './img/logo';

  3、路径的变量

  ```javascript // 3、路径的变量

  box {

  background: url(@url); }

  header {

  // 在引路径的时候如果想在变量后边加上一部分，那就用下边这种形式 background: url(‘@{url}/1.png’); }

<a name="TP2zr"></a>
### 二、less支持嵌套
- &表示最近的父级选择器
```javascript
// Less 的嵌套
// 在样式嵌套中有类似作用域的功能
// 在样式中使用变量，寻找变量的过程类似于作用域链查找机制，一层一层的往外查找
#box {
  width: @width;
  .container {
    height: 300px;
    @width: 500px;
    a {
      text-decoration: none;
      width: @width;
      background-color: @bg2;
    }
  }
}
#box {
  // &表示最近的父级选择器
  &:hover {
    color: lavender;
    }
}

三、less 支持运算

1、16 进制颜色值相加

@black:#333;
@light-black:#222;
@deep-black:@black+@light-black;
#main {
  background-color: @deep-black;
}

2、单位相加

@a:100px;
@b:100px;
@d:100rem;
@c:@a+@b;
@e:@b+@d;
@f:@d+@b;
#main {
  width: @c;
  height: @e;
  outline: @f;
}

四、less支持函数形式

• less 中的函数可以有形参
• 函数体一旦有形参，那函数执行的使用必须给他传递实参
• 形参和实参的个数是一一对应的，而且数量必须一致
• Less 中的函数支持 arguments

  // Less 支持函数形式
  // less 中的函数可以有形参
  // 函数体一旦有形参，那函数执行的使用必须给他传递实参
  // 形参和实参的个数是一一对应的，而且数量必须一致
  .public(@w,@h){
  width: @w;
  height: @h;
  border:1px solid red;
  line-height: 300px;
  }
  #box {
  .public(100px,200px)
  }

  Less 中的函数支持 arguments

.public(@w, ...) {
  // less 中的函数可以有形参
  // 如果你不想写形参，可以拿...代替
  width: @w; // @w 就是实参的第一个值
  height: 200px;
  border: @arguments;
  line-height: 300px;
}

五、！！Less 的解析顺序是从后往前解析

@front:"i am frond";
@var :"front";
#wrapper::after {
  content:@@var;
}

// Less 的继承 &：extend();
.box {
  color: red;
  background: #000;
}
#title {
  width: 200px;
  height: 200px;
  // 继承小括号里选择器的样式
  &:extend(.box);
}

六、 Less 也支持逻辑判断