前端开发者学堂 - fedev.cn

PostCSS入门：Sass用户入门指南

#译文#Preprocessor#Sass#SCSS#PostCSS#CSS处理器
发布于 Heng温

你可能已经听说过PostCSS,它比libsass快了几乎两倍(并且比Ruby Sass快了28倍)；或者听说过它支持cssnext和CSS Modules而且可扩展功能,但你是否已经找机会尝试一下了？

PostCSS最强大之处在于它是模块化并且基于插件的架构，不过这也是个缺点。如果你之前在项目中使用Sass(比如大多数的设计师和前端开发者)，你从不需要配置任何东西——Sass内置了全部实用功能，开箱即用。然而，PostCSS需要你做一些配置。你不得不从一眼看不到底的插件列表选择插件并且自己把全部插件一起配置。

这篇教程为Sass用户提供了(我认为是)一个优秀的基本配置，让你能够容易地尝试PostCSS并在以后去深入细节。希望你觉得它有用，任何建议和评论请发推到@svileng，谢谢!

**注意：很多PostCSS项目试图通过一个单一插件为你提供类Sass功能。**我会避免这样，当我需要指定特性时将引入独立的插件，这将给你带来更高的灵活性，而且你也可以使用一些相比Sass更强大的新插件。

运行PostCSS

运行PostCSS的方法有很多种。你可以很容易地将它添加到Gulp或Webpack的构建过程中；但是这篇指南中，我们要让事情尽可能简单，我们将使用PostCSS的CLI。大多数人需要像这样全局安装它：

npm install -g postcss-cli

然而，我推荐安装在可运行的本地环境，让他位于你当前工作的项目：

npm install --save-dev postcss-cli

并像这样运行它(位于项目根目录下):

./node_modules/.bin/postcss [options]

我发现这样比跨项目全局安装模块在版本管理上表现更好。为了变得更容易些，你可以在package.json的scripts部分加入下面几行：

{
  "name": "mysite",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "node app.js",
    "postcss": "postcss --config postcss.json"
  },
  "dependencies": {
    "conveyor-belt": "0.0.5",
    "express": "~4.9.0",
    "express-handlebars": "^2.0.1",
    "morgan": "~1.3.0"
  },
  "devDependencies": {
    "postcss-cli": "^2.5.1",
  }
}

原来你可以省略./node_modules/.bin并且只需执行postcss。感谢*vectorsize的小技巧！

现在你只需执行

npm run postcss

你很可能已经注意到了--config postcss.json参数,它将包括我们的PostCSS配置。

与其在命令行给package.json文件中传入大量参数，我们可以把全部配置存在一个单一的JSON文件。下面是基本结构：

{
  "use": [],
  "input": "css/main.css",
  "output": "public/main.css",
  "local-plugins": true,
  "watch": true
}

虽然这是一个合法的例子，但它实际上什么都不能做！注意这个空的use数组，这是我们声明用来帮助我们转换输入的CSS并添加功能的PostCSS插件的地方。

示例PostCSS配置

如果你是从一个Sass项目迁移过来的，你可能想要有：

  • CSS @imports
  • CSS @extends
  • $variables
  • Nested classes
  • Mixins
  • Autoprefixing

为了获得这些功能，你需要安装相关的模块：

**注意：**插件提供了与Sass几乎相同的语法,但有一些语法略微不同(比如postcss-mixins更强大)，所以更多信息请在上面的页面中确认。

然后用一行命令安装它们：

npm install --save-dev postcss-import postcss-simple-vars postcss-extend postcss-nested postcss-mixins autoprefixer

接着更新你的postcss.json:

{
  "use": [
    "autoprefixer",
    "postcss-import",
    "postcss-simple-vars",
    "postcss-extend",
    "postcss-nested",
    "postcss-mixins"
  ],
  "input": "css/main.css",
  "output": "public/main.css",
  "local-plugins": true,
  "watch": true,
  "autoprefixer": {
    "browsers": "> 5%"
  }
}

注意我们为autoprefixer添加了一个额外的键值,你也可以用json来配置单独的插件！

现在你只需要执行npm run postcss(现在命令行不会有输出内容，很遗憾，你只能看到一个空行)然后它将自动转换并监听代码的变化。

拓展阅读

既然你已经掌握了入门PostCSS需要的大多数东西，你可能会想看一下cssnext并从今天开始使用CSS4，或者看看长长的现在可用的语言扩展，linters和优化器列表。

本文根据@Svilen Gospodinov的《Getting started with PostCSS: A quick guide for Sass users》所译，整个译文带有我们自己的理解与思想，如果译得不好或有不对之处还请同行朋友指点。如需转载此译文，需注明英文出处:https://medium.com/@svilen/getting-started-with-postcss-a-quick-guide-for-sass-users-90c8b675d5f4?swoff=true#.g61iseal1。

Heng温

前端开发，音乐，动漫，技术控，喜欢折腾新鲜事物，以不断学习的态度，在前端的路上走下去。

如需转载，烦请注明出处：https://www.fedev.cn/preprocessor/getting-started-with-postcss-a-quick-guide-for-sass-users.htmlnike air max 1 pink