React中less、sass、stylus、postCSS等预处理器解决了什么问题？如何选择？

今天闲下来脑海里突然蹦出一个问题，一个react项目如何选择预处理器？结合之前的笔记，我写下这篇文章。

什么是css预处理器？
为什么要使用css预处理器？其优缺点。
有哪些流行的css预处理器？及其特点。
在react中使用哪种？

将结合以上四点进行分析。

什么是css预处理器？

css预处理器是一个能让你通过自己独有的语法实现css的工具。
为什么要使用css预处理器？其优缺点。

先上结论，使用原因：

css不支持模块化
css无法显示嵌套关系
css不支持变量、运算和函数
css不支持继承

优点：css有些情景处理不了，需要css预处理器更强大的功能。

缺点：学习成本以及css预处理语言无法直接运行在浏览器环境，需要额外的构建环节，比如编译（但是随着工程化越来越成熟这一点也可以忽略不计）。

以下讲述css预处理器如何解决刚提到的css不支持的场景：（以下对照的例子，css预处理器我选择的less处理）

css不支持模块化，作为一种全局样式表语言，它的规则会应用到文档的所有元素上，会造成样式冲突。

javascript 复制代码

// index.less文件
// less模块化写法
.bg {
  width: 100px;
  height: 100px;
  background-color: red;
}

// index.tsx文件
import React from 'react';
import styles from './index.less';

export default function Layout() {
  return (
    <div className={styles.bg}>
    </div>
  );
}

样式如下：可以看到通过模块化的使用，class会被生成唯一值。

也可以通过第二种写法达到原生css的效果，import less文件的写法变了：

javascript 复制代码

// index.tsx文件
import React from 'react';
import './index.less';

export default function Layout() {
  return (
    <div className='bg'>
    </div>
  );
}

浏览器渲染结果如下：

css无法显示嵌套关系。

css 复制代码

// 原生css无法显示层级关系
.nav {margin: auto; width: 1000px; color: #333;}

.nav li {float: left; width: 100px;}

.nav li a {display: block; text-decoration: none;}

css 复制代码

// less支持嵌套关系
.nav{
   margin: auto;
   width: 1000px;  
   color: #333;
  
   li{  
       float: left;  
       width: 100px;  
    
       a{
           display: block;
           text-decoration: none;
       } 
     }
    }

css不支持变量、运算和函数。

变量：

css 复制代码

// 原生css无法定义变量，导致同一个颜色声明两次，万一样式变更需要修改多个地方
.nav {color: #333; }
.header {color: #333;}

less 复制代码

// less声明变量，样式修改只需修改一个地方
@custom-color:#333;
.nav {color:@custom-color; }
.header {color:@custom-color;}

运算：

less 复制代码

// 看一下运算
@base: 5%;
@filler: @base * 2; // 结果是 10% 
@other: @base + @filler; // 结果是 15%

函数：

less 复制代码

// 通过函数计算得到一些值
@base: #f04615; 
@width: 0.5; 
.class { 
    width: percentage(@width); // returns `50%` 
    color: saturate(@base, 5%); // 将颜色饱和度增加 5%
}

css不支持混入和继承。

继承如下：

javascript 复制代码

// less文件如下
.animal {
 width: 100px;
 height: 100px;
 background-color: black;
 color: white;
}

.bear {
 // 继承.animal
 &:extend(.animal);
 background-color: brown;
}

// index.tsx文件如下
import React from 'react';
import styles from './index.less';

export default function Layout() {
 return (
   <div className={styles.bear}>
   </div>
 );
}

浏览器渲染结果如下：

可以看到通过extend关键字做到了样式覆盖。

混入如下：

less 复制代码

.animal (@bg: black) {
 width: 100px;
 height: 100px;
 background-color: @bg;
 color: white;
}

.bear {
 .animal(brown);
}

浏览器渲染结果如下：

可以看到通过.animal(brown);做到了样式覆盖。

有哪些流行的css预处理器？及其特点。

Sass：最早发布于2006年，是基于Ruby的，在服务器端处理的。具有最成熟的社区和文档。通过嵌套、变量、混合和其他高级功能来扩展 CSS。它提供了更好的代码组织和可重用性，可以减少代码的重复，同时增加了代码的可读性和可维护性。支持模块化开发，可以将样式文件拆分成多个文件，便于管理和维护。

Less：最早发布于2009年，是基于JavaScript，在客户端处理的。和Sass相比语法简单一点，逻辑处理方面弱于Sass，其他功能基本一致，社区和文档也比较丰富。

Stylus: 最早发布于2010年，是一种基于 Node.js 的 CSS 预处理器，与 Sass 和 LESS 不同的是，Stylus 的语法非常灵活，可以省略大括号、分号等符号，同时支持类似 Python 的缩进语法。对重视简单性开发的人员友好。

PostCSS: PostCSS 是一种用JavaScript编写的CSS处理器，可以通过插件来处理现有的CSS文件。它与 Sass、LESS 和 Stylus 不同，不是一种完整的样式语言，而是一种用来处理CSS的工具。PostCSS 可以用于自动添加浏览器前缀、压缩 CSS、转换 CSS 新特性等。擅长转换 CSS 以实现更好的浏览器兼容性。

在react中使用哪种？

Sass最成熟，社区和文档最丰富，使用者最多。

Less逻辑处理弱于Sass，其余基本一致。两者对新手来说需要一个学习曲线，适用于需要大量使用变量、混入和嵌套等高级功能的项目，它们为维护大型且复杂的样式表提供了更全面的解决方案。

Stylus逻辑处理能力也不错，而且语法灵活，写起来流畅。

PostCSS使用者也越来越多，较低学习曲线，对于旨在提高浏览器兼容性、优化 CSS 和利用特定现代 CSS 功能的项目很有价值。

总结：无脑入Sass或者Less，有简单性开发需求可以选择Stylus，重视浏览器兼容性和优化选择PostCss