【Less】一文带你了解Less

【Less】一文带你了解Less

一、CSS预处理器

1.1 CSS编写的痛点

• CSS作为一种样式语言, 本身用来给HTML元素添加样式是没有问题的.
• 但是目前前端项目已经越来越复杂, 不再是简简单单的几行CSS就可以搞定的, 我们需要几千行甚至上万行的CSS来完成页面的美化工作.
• 随着代码量的增加, 必然会造成很多的编写不便：
• 比如大量的重复代码, 虽然可以用类来勉强管理和抽取, 但是使用起来依然不方便；
• 比如无法定义变量（当然目前已经支持）, 如果一个值被修改, 那么需要修改大量代码, 可维护性很差; (比如主题颜色)
• 比如没有专门的作用域和嵌套, 需要定义大量的id/class来保证选择器的准确性, 避免样式混淆;  等等一系列的问题；

1.2 认识CSS预处理器

• 社区为了解决CSS面临的大量问题, 出现了一系列的CSS预处理器(CSS_preprocessor)
• CSS 预处理器是一个能让你通过预处理器自己独有的语法来生成CSS的程序;
• 市面上有很多CSS预处理器可供选择，且绝大多数CSS预处理器会增加一些原生CSS不具备的特性;
• 代码最终会转化为CSS来运行, 因为对于浏览器来说只识别CSS

CSS预处理器为CSS增加了一些编程特性，无需考虑浏览器的兼容问题，可以在CSS中使用变量，简单的逻辑程序，函数等在编程语言中的一些基本的性能，可以让CSS更加的简洁，增加适应性以及可复读性，可维护性等。

1.3 常见的CSS预处理器

• Sass/Scss
• Less
• Stylus

二、Less

2.1 认识Less

• Less （Leaner Style Sheets 的缩写） 是一门CSS 扩展语言, 并且兼容CSS。
  • Less增加了很多相比于CSS更好用的特性;
  • 比如定义变量、混入、嵌套、计算等等；
  • Less最终需要被编译成CSS运行于浏览器中（包括部署到服务器中）；

2.2 Less代码的编译

Less代码如何被编译成CSS代码运行呢？

1. 下载Node环境，通过npm包管理下载less工具，使用less工具对代码进行编译

   npm install -g less
   > lessc styles.less styles.css
   

2. 通过VSCode插件来编译成CSS

   

3. 引入CDN的less编译代码，对less进行实时的处理

     <link rel="stylesheet/less" href="./Less的基本使用.less">
     <script src="https://cdn.jsdelivr.net/npm/less@4" ></script>
   

4. 将less编译的js代码下载到本地，执行js代码对less进行编译

2.3 Less语法

1. Less兼容CSS

   • 所以我们可以在Less文件中编写所有的CSS代码；
   • 只是将css的扩展名改成了.less结尾而已；

2. 变量

   • 在Less中使用如下的格式来定义变量

   • @变量名: 变量值;

   @maincolor: #1296db;
   .container {
     width: 500px;
     height: 300px;
     background-color: @maincolor;
   }
   

3. 嵌套

   • 在CSS中，当我们需要找到一个内层的元素时，往往需要嵌套很多层的选择器

   • Less提供了选择器的嵌套

     @maincolor: #1296db;
     .container {
       width: 500px;
       height: 300px;
       background-color: @maincolor;
     
       .box {
         width: 200px;
         height: 100px;
         background-color: aquamarine;
       }
     }
     

   • &：代表的上一层选择器的名字

   • **当前选择器的伪类或者伪元素。**如 :hover :focus :after :before等

         &:hover {
         }
     

4. 运算

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

5. 混入

   • 在原来的CSS编写过程中，多个选择器中可能会有大量相同的代码

   • 我们希望可以将这些代码进行抽取到一个独立的地方，任何选择器都可以进行复用；

   • 在less中提供了混入（Mixins）来帮助我们完成这样的操作；

   • 混合（Mixin）是一种将一组属性从一个规则集（或混入）到另一个规则集的方法。

   • 假设我们定义了一个类（class）如下：

     .bordered {
       border: 1px solid black;
     }
     

   • 如果我们希望在其它规则集中使用这些属性呢？没问题，我们只需像下面这样输入所需属性的类（class）名称即可，如下所示：

     .container {
       width: 500px;
       height: 300px;
       background-color: @maincolor;
     
       .bordered();
     }
     

6. extend继承

   • 和mixins作用类似，用于复用代码；
   • 和mixins相比，继承代码最终会转化成并集选择器

7. 作用域

   • 在查找一个变量时，首先在本地查找变量和混合（mixins）；
   • 如果找不到，则从“父”级作用域继承；

8. 导入

   • 导入的方式和CSS的用法是一致的；

   • 导入一个 .less 文件，此文件中的所有变量就可以全部使用了；

   • 如果导入的文件是 .less 扩展名，则可以将扩展名省略掉；