postcss_PostCSS简介

postcss

• Introduction

  介绍

• Why it’s so popular

  为什么如此受欢迎

• Install the PostCSS CLI

  安装PostCSS CLI

• Most popular PostCSS plugins

  最受欢迎的PostCSS插件

  • Autoprefixer

    自动前缀

  • cssnext

    cssnext

  • CSS Modules

    CSS模块

  • csslint

    csslint

  • cssnano

    csnano

  • Other useful plugins

    其他有用的插件

  Most popular PostCSS plugins

  最受欢迎的PostCSS插件

• How is it different than Sass?

  与Sass有何不同？

介绍 (Introduction)

PostCSS is a tool that allows developers to write CSS pre-processors or post-processors, called plugins. There is a huge number of plugins that provide lots of functionalities, and sometimes the term “PostCSS” means the tool itself, plus the plugins ecosystem.

PostCSS是一种工具，允许开发人员编写称为插件的 CSS预处理器或后处理器。 有大量提供许多功能的插件，有时“ PostCSS”一词是指工具本身，外加插件生态系统。

PostCSS plugins can be run via the command line, but they are generally invoked by task runners at build time.

PostCSS插件可以通过命令行运行，但是通常由任务运行者在构建时调用。

The plugin-based architecture provides a common ground for all the CSS-related operations you need.

基于插件的体系结构为您需要的所有与CSS相关的操作提供了通用基础。

Note: PostCSS despite the name is not a CSS post-processor, but it can be used to build them, as well as other things

注意：尽管PostCSS的名称不是CSS后处理器，但它可用于构建它们以及其他内容

为什么如此受欢迎 (Why it’s so popular)

PostCSS provides several features that will deeply improve your CSS, and it integrates really well with any build tool of your choice.

PostCSS提供了一些可以大大改善CSS的功能 ，并且可以与您选择的任何构建工具很好地集成。

安装PostCSS CLI (Install the PostCSS CLI)

Using Yarn:

使用纱 ：

yarn global add postcss-cli

or npm:

或npm ：

npm install -g postcss-cli

Once this is done, the postcss command will be available in your command line.

完成此操作后， postcss命令将在您的命令行中可用。

This command for example runs the autoprefixer plugin on CSS files contained in the css/ folder, and save the result in the main.css file:

例如，以下命令在css /文件夹中包含CSS文件上运行autoprefixer插件，并将结果保存在main.css文件中：

postcss --use autoprefixer -o main.css css/*.css

More info on the PostCSS CLI here: https://github.com/postcss/postcss-cli.

有关PostCSS CLI的更多信息，请访问： https ： //github.com/postcss/postcss-cli 。

最受欢迎的PostCSS插件 (Most popular PostCSS plugins)

PostCSS provides a common interface to several great tools for your CSS processing.

PostCSS提供了用于一些CSS处理的出色工具的通用接口。

Here are some of the most popular plugins, to get an overview of what’s possible to do with PostCSS.

以下是一些最受欢迎的插件，以概述使用PostCSS可能做的事情。

自动前缀 (Autoprefixer)

Autoprefixer parses your CSS and determines if some rules need a vendor prefix.

Autoprefixer解析您CSS并确定某些规则是否需要供应商前缀。

It does so according to the Can I Use data, so you don’t have to worry if a feature needs a prefix, or if prefixes you use are now unneeded because obsolete.

它根据“ 我可以使用”数据来执行此操作，因此您不必担心某个功能是否需要前缀，或者是否由于过时而不需要使用的前缀。

You get to write cleaner CSS.

您可以编写更简洁CSS。

Example:

例：

a {
    display: flex;
}

gets compiled to

被编译为

a {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

cssnext (cssnext)

https://github.com/MoOx/postcss-cssnext

https://github.com/MoOx/postcss-cssnext

This plugin is the Babel of CSS, allows you to use modern CSS features while it takes care of transpiling them to a CSS more digestible to older browsers:

该插件是CSS的Babel ，可让您使用现代CSS功能，同时将它们转换为更易于旧浏览器消化CSS：

• it adds prefixes using Autoprefixer (so if you use this, no need to use Autoprefixer directly)
  它使用Autoprefixer添加前缀(因此，如果使用此前缀，则无需直接使用Autoprefixer)

• it allows you to use CSS Variables

  它允许您使用CSS变量

• it allows you to use nesting, like in Sass
  它允许您使用嵌套，例如在Sass中

and a lot more!

还有更多 ！

CSS模块 (CSS Modules)

PostCSS Modules let you use CSS Modules.

PostCSS模块使您可以使用CSS模块。

CSS Modules are not part of the CSS standard, but they are a build step process to have scoped selectors.

CSS模块不是CSS标准的一部分，但是它们是具有作用域选择器的构建步骤。

csslint (csslint)

Linting helps you write correct CSS and avoid errors or pitfalls. The stylint plugin allows you to lint CSS at build time.

整理可以帮助您编写正确CSS并避免错误或陷阱。 stylint插件允许您在构建时对CSS进行整理 。

csnano (cssnano)

cssnano minifies your CSS and makes code optimizations to have the least amount of code delivered in production.

cssnano最小化CSS并进行代码优化，以使生产中交付的代码量最少。

其他有用的插件 (Other useful plugins)

On the PostCSS GitHub repo there is a full list of the available plugins.

在PostCSS GitHub存储库上，有可用插件的完整列表 。

Some of the ones I like include:

我喜欢的一些包括：

• LostGrid is a PostCSS grid system

  LostGrid是PostCSS网格系统

• postcss-sassy provides Sass-like mixins

  postcss-sassy提供类似Sass的mixins

• postcss-nested provides the ability to use Sass nested rules

  postcss嵌套提供了使用Sass嵌套规则的功能

• postcss-nested-ancestors, reference any ancestor selector in nested CSS

  postcss-nested-ancestors ，引用嵌套CSS中的任何祖先选择器

• postcss-simple-vars, use Sass-like variables

  postcss-simple-vars ，使用类似Sass的变量

• PreCSS provides you many features of Sass, and this is what is most close to a complete Sass replacement

  PreCSS为您提供了Sass的许多功能，这是最接近完整Sass替代品的地方

与Sass有何不同？ (How is it different than Sass?)

Or any other CSS preprocessor?

还是任何其他CSS预处理器？

The main benefit PostCSS provides over CSS preprocessors like Sass or Less is the ability to choose your own path, and cherry-pick the features you need, adding new capabilities at the same time. Sass or Less are “fixed”, you get lots of features which you might or might not use, and you cannot extend them.

与CSS预处理器(如Sass或Less)相比，PostCSS提供的主要好处是可以选择自己的路径，并挑选所需的功能，同时添加新功能。 Sass或Less是“固定的”，您会获得许多可能会或可能不会使用的功能，并且无法扩展它们。

The fact that you “choose your own adventure” means that you can still use any other tool you like alongside PostCSS. You can still use Sass if this is what you want, and use PostCSS to perform other things that Sass can’t do, like autoprefixing or linting.

您“选择自己的冒险经历”这一事实意味着，您仍然可以在PostCSS旁边使用喜欢的任何其他工具。 如果这是您想要的，您仍然可以使用Sass，并使用PostCSS来执行Sass不能执行的其他操作，例如自动前缀或插入。

You can write your own PostCSS plugin to do anything you want.

您可以编写自己的PostCSS插件来执行所需的任何操作。

翻译自: https://flaviocopes.com/postcss/

postcss