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

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

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

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

  1. 什么是css预处理器?

    css预处理器是一个能让你通过自己独有的语法实现css的工具。

  2. 为什么要使用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);做到了样式覆盖。

  1. 有哪些流行的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 以实现更好的浏览器兼容性。

  1. 在react中使用哪种?

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

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

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

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

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

相关推荐
一斤代码2 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子2 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年2 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子3 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina3 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路4 小时前
React--Fiber 架构
前端·react.js·架构
伍哥的传说4 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409194 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding4 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js
布兰妮甜4 小时前
Vue+ElementUI聊天室开发指南
前端·javascript·vue.js·elementui