less基础——优化必备～

---

前言

less可以说是动态化的css语言，主要是因为他的代码可以复用

提示：以下是本篇文章正文内容，下面案例可供参考

一、less是什么？

less作为一门CSS扩展语言，也就是说CSS预处理器。（Leaner Style
Sheets）简称less，它只不过是为css新增这些的功能，比如说：变量、函数、作用域等等。它的优点是：更具有维护性、扩展性等，可以降低了维护的成本，根据按这样的话，那么less可以让我们写更少的代码做更多的事情。
和css相比下，css的语法非常简单，而且对开发者来说要求比较低，比较合适小白者，但是遇到有些问题，比如没有这种变量、函数等等，的确还不如less的扩展性，需要写大量的代码，但是看眼中的确没有逻辑的代码，CSS冗余度是比较高的。不方便维护，不利于复用，而且没有计算的能力。

如果对css有基础的话，less很容易上手的。因为css和less区别不大的，反正可以通过编译生成浏览器能识别的css文件

二、使用步骤

1.less的安装

1. 在全局npm 安装less ，并执行lessc less文件路径 编译完成后的css路径，然后把编译后的css文件引入到html就可以了
2. bootCDN搜索less，然后在html引入

2.less使用

这个less使用不用复杂，就是新建一个后辍名为less文件即可，然后在less文件使用less语句，当写完less语句编译后就会自动生成多了一个后辍名为css文件即可。

3.less的功能

01 定义变量

变量的定义方式为@，可以赋给变量！

语法：@变量名：值。
代码如下（示例）：

@gray: #999;
@size: 20px;
.plusAction a {
  color: @gray;
  font-size: -10 + @size;
}

02 混合

加（）自己本身不显示
混合就是一种将一系列属性从一个规则引入（“混合”）到另一个规则集的方式。这个意思是在less中定义的选择器类可以直接放入其他选择器类里面，这种重复使用很强。

.flex() {
  display: flex;
  flex-wrap: wrap;
}
.plusAction .el-form-item__content {
  // 把.flex 内容混入到 当前的css规则中
  .flex;
  justify-content: space-between;
}

03嵌套

页面结构

.loginBlock {
  h3 {
    font-size: 18px;
    margin-bottom: 16px;
    font-weight: 400;
    span {
      color: dodgerblue;
      font-size: 26px;
      font-weight: 900;
    }
  }
}

04 计算

@w: 10px;
.test {
  span {
    display: inline-block;
    height: 44px;
    background-color: aqua;
    margin: 10px;
  }
}

05转义

转义后都是字符串

@str: ~".loginBlock .test span";
@b: ~"1px solid red";
//如果作为选择器或者数学 @「变量」
@{str} {
  color: red;
  border: @b;
}

06命名空间 映射

#bg() {
  background-color: aquamarine;
  font-size: 24px;
}
#colors() {
  primary: blue;
  secondary: green;
  size: 24px;
}
.testp {
  //。test.s2（）//取选择器里面的所有属性与属性值
  font-size: #colors[size];
  //映射某一个值
  background-color: .test.s3[background-color];
}