less预处理器

css预处理器less

css痛点

但是目前前端项目已经越来越复杂, 不再是简简单单的几行CSS就可以搞定的, 我们需要几千行甚至上万行的CSS来完成页面的美化工作. 随着代码量的增加, 必然会造成很多的编写不便：

比如大量的重复代码, 虽然可以用类来勉强管理和抽取, 但是使用起来依然不方便；
比如无法定义变量（当然目前已经支持）, 如果一个值被修改, 那么需要修改大量代码, 可维护性很差; (比如主题颜色)
比如没有专门的作用域和嵌套, 需要定义大量的id/class来保证选择器的准确性, 避免样式混淆;

所以有一种对CSS称呼是 “面向命名编程”;

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

常见的CSS预处理器

常见的预处理器有哪些呢? 目前使用较多的是三种预处理器:

Sass/Scss：
- 2007年诞生，最早也是最成熟的CSS预处理器，拥有ruby社区的支持，是属于Haml（一种模板系统）的一部分;
- 目前受LESS影响，已经进化到了全面兼容CSS的SCSS;
Less:
- 2009年出现，受SASS的影响较大，但又使用CSS的语法，让大部分开发者更容易上手;
- 比起SASS来，可编程功能不够，不过优点是使用方式简单、便捷，兼容CSS，并且已经足够使用；
- 另外反过来也影响了SASS演变到了SCSS的时代；
- 著名的Twitter Bootstrap就是采用LESS做底层语言的，也包括React的UI框架AntDesign。
Stylus:
- 2010年产生，来自Node.js社区，主要用来给Node项目进行CSS预处理支持;
- 语法偏向于Python, 使用率相对于Sass/Less少很多

认识less

pIt’s CSS, with just a little more.

Less （Leaner Style Sheets 的缩写）是一门CSS 扩展语言, 并且兼容CSS。
- Less增加了很多相比于CSS更好用的特性;
- 比如定义变量、混入、映射、继承，作用域、嵌套、运算等等；
- Less最终需要被编译成CSS运行于浏览器中（包括部署到服务器中）；
less虽然更加容易上手,但是没有scss灵活

less的使用

less的代码最后都会转换成css的代码进行使用

less兼容css,也可以写css代码只是将扩展名改成了less而已

编译less的方式

方式一：下载Node环境，通过npm包管理下载less工具，使用less工具对代码进行编译；
方法二：通过VSCode插件来编译成CSS或者在线编译 https://lesscss.org/less-preview/
方式三：引入CDN的less编译代码，对less进行实时的处理；
```
<script src="https://cdn.jsdelivr.net/npm/less@4" ></script>
```
方式四：将less编译的js代码下载到本地，执行引入js代码对less进行编译；

less变量和嵌套(Nesting)的使用

定义变量@variate-name:value@符号+变量名称: 变量值
嵌套: 可以和html有相同的结构嵌套, 相似后代选择器的效果

&表示当前元素

@main: red;
.box{
  width: 200px;
  height: 200px;
  background-color: color(orange);
  .item{
    width: 100px;
    height: 100px;
    background-color: color(@main);
    &::after{
      content: "这里是伪元素";
    }
    &+ .item2{
      width: 50px;
      height: 50px;
      background-color: navajowhite;
    }
  }
}

less运算(Operations)

在Less中，算术运算符 +、-、*、/ 可以对任何数字、颜色或变量进行运算。

less运算的结果以最左侧操作数的单位类型为准
如果单位换算无效或失去意义，则忽略单位。
- 就是当两个不是相同单位的值无法进行运算的时候会直接以值进行运算以左侧单位为准

// 所有操作数被转换成相同的单位
@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%

less混合(Mixins)

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

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

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

混合（Mixin）是一种将一组属性从一个规则集（或混入）到另一个规则集的方法。
可以避免在同一个html标签中添加多个class，提高代码的复用性
可以设置参数和默认值
注意：混入在没有参数的情况下，小括号可以省略，但是不建议这样使用 可能会废除省略小括号的语法；
注意：多个参数的时候，使用 ; 隔开的不是使用，

@main: red;
.box{
  .info(10px; green);
  width: 200px;
  height: 200px;
  background-color: color(orange);
}

.info(@inset: 3px; @col: orchid){
  border: @inset solid @col;
}

less映射(map)

混入和映射结合：混入也可以当做一个自定义函数来使用

//案例1
.colors() {
  primary: blue;
  secondary: green;
}
.button {
  color: .colors[primary];
  border: 1px solid .colors[secondary];
}
//案例2
@htmlFontSize:16px;
.pxToRem(@px){
  result:(@px/@htmlFontSize * 1rem);
}

less的继承extend

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

.subClassOne{
  &:extend(.parentClass);
}

注意：这里只能继承选择器，不能继承混合

less内置函数

Less 内置了多种函数用于转换颜色、处理字符串、算术运算等。
内置函数手册：https://less.bootcss.com/functions/

less作用域(Sope)

在查找一个变量时，首先在本地查找变量和混合（mixins）；
如果找不到，则从“父”级作用域继承；
当前less文件公共区域里，定义的变量为全局变量和js差不多
相同变量，就近原则谁离的近就使用谁，

Less注释（Comments）

在Less中，块注释和行注释都可以使用；

Less导入（Importing）

导入的方式和CSS的用法是一致的；
导入一个 .less 文件，此文件中的所有变量就可以全部使用了；
如果导入的文件是 .less 扩展名，则可以将扩展名省略掉；

命名空间和访问符

有时，出于组织结构或仅仅是为了提供一些封装的目的，你希望对混合（mixins）进行分组。你可以用 Less 更直观地实现这一需求。

假设你希望将一些混合（mixins）和变量置于 .bundle 之下，为了以后方便重用或分发：

.bundle() {
  .button {
    display: block;
    border: 1px solid black;
    background-color: grey;
    &:hover {
      background-color: white;
    }
  }
}

将.bundle 混合到其他的选择器中

.header a {
  color: orange;
  .bundle.button();  // 还可以书写为 #bundle > .button 形式
}

认识Sass和Scss

事实上，最初Sass 是Haml的一部分，Haml 是一种模板系统，由 Ruby 开发者设计和开发。
所以，Sass的语法使用的是类似于Ruby的语法，没有花括号，没有分号，具有严格的缩进；

我们会发现它的语法和CSS区别很大，后来官方推出了全新的语法SCSS，意思是Sassy CSS，他是完全兼容CSS的。

目前在前端学习SCSS直接学习SCSS即可：

SCSS的语法也包括变量、嵌套、混入、函数、操作符、作用域等；
通常也包括更为强大的控制语句、更灵活的函数、插值语法等；
大家可以根据之前学习的less语法来学习一些SCS语法； https://sass-lang.com/guide