如何使用PostCSS作为Sass的一个可配置的替代品

热门技术勘探工
1,168 阅读5分钟

How to Use PostCSS as a Configurable Alternative to Sass

网络开发者喜欢Sass CSS预处理程序。根据CSS现状调查中的Sass意见，每个开发者都知道它是什么，89%的人经常使用它，88%的人满意度很高。

许多网络捆绑程序包括Sass处理，但你也可能在不知不觉中使用PostCSS。PostCSS主要以其Autoprefixer插件而闻名，它可以在需要时自动为CSS属性添加-webkit 、-moz 、-ms 供应商前缀。它的插件系统意味着它可以做更多的事情......比如编译.scss 文件，而不必使用Sass编译器。

本教程解释了如何创建一个自定义的CSS预处理器，它可以编译Sass语法并补充更多的功能。对于有特定的CSS要求，并且知道一点Node.js的人来说，这是一个理想的选择。

快速入门

可以从GitHub上克隆一个PostCSS项目的例子。它需要Node.js，所以运行npm install 来获取所有的依赖项。

使用src/scss/main.scss 源代码编译示范build/css/main.css 。

npm run css:dev

每当文件被修改时，使用自动编译。

npm run css:watch

然后在终端按Ctrl|Cmd+C退出观察。

这两个选项都会在build/css/main.css.map ，在开发者工具中引用原始的源文件，创建一个源地图。

没有源码图的生产级最小化CSS可以用以下方法编译。

npm run css:build

更多信息请参考README.md 文件。

你应该用PostCSS代替Sass吗？

Sass编译器没有什么问题，但要考虑以下因素。

模块的依赖性

最新的Dart版本的Sass可以使用Node.jsnpm 软件包管理器全局安装。

npm install -g sass

编译Sass.scss 代码与。

sass [input.scss] [output.css]

自动生成源码图（--no-source-map 将关闭源码图），或者可以添加--watch ，在源码文件改变时自动编译。

最新版本的Sass需要不到5MB的安装空间。

PostCSS需要的资源应该更少，而且是一个类似于Sass的基本编译器，具有自动修饰功能，minification需要不到1MB的空间。在现实中，你的node_modules 文件夹将扩大到60多MB，并且随着插件的增加而迅速增加。这主要是npm 安装其他的依赖性。尽管PostCSS可能不使用它们，但它不能被认为是一个轻量级的替代品。

不过，如果你已经在使用PostCSS的自动补码器或其他用途，Sass可能就没有必要了。

处理速度

缓慢的、基于Ruby的Sass编译器早已不复存在，最新版本使用了编译后的Dart运行时。它的速度很快。

PostCSS是纯JavaScript，虽然基准会有所不同，但它在编译相同的源代码时可能会慢三倍。

然而，如果你已经在Sass之后运行PostCSS，这种速度上的差异就不会那么明显了。两阶段的过程可能比单独使用PostCSS要慢，因为它的大部分工作涉及到对CSS属性的标记。

定制化

Sass语言包含了大量的功能，包括变量、嵌套、参数、混合器等等。但也有不足之处。

  1. 你不能轻易添加新的功能。

    也许你想要一个将HSLA颜色转换成RGB的选项。也许可以写一个自定义函数，但其他要求就不可能了--比如内联一个SVG作为背景图片。

  2. 你不能轻易限制功能集。

    也许你希望你的团队不要使用嵌套或@extend 。提示规则会有帮助，但它们不能阻止Sass编译有效的.scss 文件。

PostCSS的可配置性要高得多。

就其本身而言，PostCSS什么都不做。处理功能需要一个或多个可用的插件。大多数都是执行单一的任务，所以如果你不想要嵌套，就不要添加嵌套插件。如果有必要，你可以在一个标准的JavaScript模块中编写自己的插件，可以利用Node.js的力量。

安装PostCSS

PostCSS可以与webpack、Parcel、Gulp.js和其他构建工具一起使用，但本教程展示了如何从命令行运行它。

如果有必要，用npm init 来初始化一个新的Node.js项目。通过安装以下模块来设置PostCSS，以实现基本的.scss ，并为参数、变量、混合器、嵌套和自动排序提供插件。

npm install --save-dev postcss postcss-cli postcss-scss postcss-advanced-variables postcss-nested autoprefixer

像示例项目一样，PostCSS和它的插件都是在本地安装的。如果你的项目可能有不同的编译要求，这是一个实用的选择。

注意：PostCSS只能从一个JavaScript文件中运行，但该模块提供了一个封装器，可以将其作为JavaScript文件。 postcss-cli模块提供了一个包装器，可以从命令行中调用。Postcss-scss模块允许PostCSS读取.scss 文件，但不对其进行转换。

Autoprefixer配置

Autoprefixer使用browserslist来确定根据你的支持的浏览器列表需要哪些厂商的前缀。最简单的做法是在package.json 中把这个列表定义为一个"browserslist" 数组。下面的例子是在任何浏览器的市场份额至少为2%的情况下添加厂商前缀。

"browserslist": [
  "> 2%"
],

你的第一次构建

你通常会有一个单一的根Sass.scss 文件，导入所有需要的部分/组件文件。比如说。

// root Sass file
// src/scss/main.scss
@import '_variables';
@import '_reset';
@import 'components/_card';
// etc.

编译可以通过运行npx postcss ，然后是输入文件、--output 文件和任何需要的选项来开始。举例来说。

npx postcss ./src/scss/main.scss \
    --output ./build/css/main.css \
    --env development \
    --map \
    --verbose \
    --parser postcss-scss \
    --use postcss-advanced-variables postcss-nested autoprefixer

这个命令

  1. 解析./src/scss/main.scss
  2. 输出到./build/css/main.css
  3. 设置NODE_ENV 环境变量为development
  4. 输出一个外部源码图文件
  5. 设置粗略的输出和错误信息
  6. 设置postcss-scss Sass解析器，以及
  7. 使用插件postcss-advanced-variables,postcss-nested, 和autoprefixer 来处理参数、变量、混合器、嵌套和自动排序。

另外，你可以添加--watch ，以便在修改.scss 文件时自动编译。

继续阅读《如何使用PostCSS作为Sass的可配置替代方案》（SitePoint）。

avatar
文章
阅读
粉丝