什么是postcss

ostcss 一种对css编译的工具，类似babel对js的处理，常见的功能如：

1 . 使用下一代css语法

2 . 自动补全浏览器前缀

3 . 自动把px代为转换成rem

4 . css 代码压缩等等

postcss 只是一个工具，本身不会对css一顿操作，它通过插件实现功能，autoprefixer 就是其一。

与 less sass 的区别

less sass 是预处理器，用来支持扩充css语法。

postcss 既不是预处理器也不是后处理器，其功能比较广泛，而且重要的一点是，postcss可以和less/sass结合使用

如何使用

这里只说在webpack里集成使用，首先需要 loader

1 . 安装

npm install postcss-loader –save-dev

2 . webpack配置

一般与其他loader配合使用，下面*标部分才是postcss用到的

配合时注意loader的顺序（从下面开始加载）

3 . postcss配置

项目根目录新建 postcss.config.js文件，里面配置一些插件

注：也可以在webpack中配置

常用的postcss插件

1 . Autoprefixer

前缀补全，全自动的，无需多说

安装：

cnpm install Autoprefixer --save-dev

2 . postcss-cssnext

使用下个版本的css语法【关于语法另一篇文章会单独讲】

安装：

cnpm install postcss-cssnext --save-dev

3 . postcss-pxtorem

把px转换成rem

安装：

cnpm install postcss-pxtorem --save-dev

配置项：

特殊技巧:不转换成rem

px检测区分大小写，也就是说Px/PX/pX不会被转换，可以用这个方式避免转换成rem

原理

工作流

大致步骤：

将CSS解析成抽象语法树(AST树)
将AST树”传递”给任意数量的插件处理
将处理完毕的AST树重新转换成字符串

在PostCSS中有几个关键的处理机制：

Source string → Tokenizer → Parser → AST → Processor → Stringifier

Tokenizer

将源css字符串进行分词

举个例子：

.className { color: #FFF; }

通过Tokenizer后结果如下：

[
    ["word", ".className", 1, 1, 1, 10]
    ["space", " "]
    ["{", "{", 1, 12]
    ["space", " "]
    ["word", "color", 1, 14, 1, 18]
    [":", ":", 1, 19]
    ["space", " "]
    ["word", "#FFF" , 1, 21, 1, 23]
    [";", ";", 1, 24]
    ["space", " "]
    ["}", "}", 1, 26]
]

以word类型为例，参数如下：

const token = [
     // token 的类型，如word、space、comment
    'word',

    // 匹配到的词名称
    '.className',

    // 代表该词开始位置的row以及column，但像 type为`space`的属性没有该值
    1, 1,

    // 代表该词结束位置的row以及column，
    1, 10
]

Parser

经过Tokenizer之后，需要Parser将结果初始化为AST

this.root = {
    type: 'root',
    source: { input: {css: ".className { color: #FFF; }", hasBOM: false, id: "<input css 1>"},
                   start: { line: 1, column: 1 } ,
                  end: { line: 1, column: 27 }
    },
   raws:{after: "", semicolon: false}
   nodes // 子元素
}

Processor

经过AST之后，PostCSS提供了大量JS API给插件用

Stringifier

插件处理后，比如加浏览器前缀，会被重新Stringifier.stringify为一般CSS。

参考：
https://segmentfault.com/a/1190000017886402
https://www.jianshu.com/p/288963680642

作者：指尖跳动
链接：https://www.jianshu.com/p/9a9048bc8978
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

么是postcss?

官网介绍PostCss是一个允许使用JS插件转换样式的工具。这些插件可以检查（lint）你的CSS，支持CSS Variables和Mixins，编译尚未被浏览器广泛支持的先进的CSS语法，内联图片，以及其它很多优秀的功能。

那么它到底是什么呢。

我们先来介绍一下它最出名的最实用的插件 autoprefixer

autoprefixer是一个让你偷懒的神器。如果你的项目是PC端，并且产品大大或者项目大大要求你兼容低版本IE，各种浏览器，是不是很头疼。别担心，用了autoprefixer，写正常的标准css就可以了，autoprefixer会自动帮你添加浏览器前缀哦。

这样写是不是很省事，很神奇。

除了这个用处外，国内外大佬们为它写了非常多的插件。

这里为大家提供几个插件。

cssnext

cssnext能够让你使用下一代css语法，如目前css4还没有各浏览器支持，但是可以使用cssnext来把css4的语法翻译成css3

posts-px2rem

使用移动适配问题的插件

posts-partial-import

让你的css文件支持@import

precss

这是一个大杂烩，主要是为了满足SASS开发者的习惯，继承了很多插件。

postcss-mixins 一个和SASS的mixins用法相同的插件

postcss-atroot 让你的嵌套css处于根部

posts-extend 有相同结构却有那么一点点的区别，用这个可以方便同意管理相同部分样式代码

postcss是如何使用得

这里简单展示一下webpack+postcss得使用

首先需要安装webpack中postcss得解析器 postcss-loader 还有我们需要使用得库，这里我们只使用autoprefixer

	$ yarn add postcss-loader
	$ yarn add autoprefixer

之后在webpack.config.js module rule中加入postcss-loader

最后我们还得写postcss.config.js，添加你加入的那些插件，我们这边只使用了autoprefixer

这样我们就配置完成了个简单的postcss得项目了。

之后我会更加深入了解一下postcss其它插件得使用，会在以后为大家详解。

希望大家喜欢，可以多多关注一下我。

ostCSS是一个非常通用的工具，它可以通过javascript插件转换CSS样式。它的灵活性在于它的建造方式。

PostCSS的核心部分是一个node.js模块，您可以使用NPM进行安装，它有一个由200多个插件组成的生态系统，您可以在项目中选择使用这些插件。

PostCSS既不是预处理器，也不是后处理器，因为不同的PostCSS插件可能属于这两类中的任何一类，或者同时属于这两类；它完全取决于您对它的理解。使用PostCSS，您不需要学习不同的语法，比如sass或Less；您可以立即开始使用它。

PostCSS获取现有的css文件并将其转换为javascript可读数据，然后javascript插件执行修改，postss返回原始文件的修改版本。听起来很酷，不是吗？

在这篇文章中，我们将查看6个Postcss插件，让您了解使用这个出色的工具可以实现的一些伟大的事情。

Autoprefixer

autoprefixer可能是最知名的postcss插件，因为它被谷歌、Twitter和Shopify等知名科技公司使用。它在必要的地方向CSS规则添加供应商前缀。

autoprefixer使用我可以使用的数据。这样它就不会过时，而且可以应用最新的规则。您可以在它的交互式演示站点上查看它的工作原理。

CSSnext

cssnext是一个CSS发起者，它允许您在当前站点上使用未来的CSS语法。W3C有许多新的CSS规则，这些规则目前没有被浏览器实现，但可以使开发人员更快、更容易地编写更复杂的CSS。cssnext是用来弥补这个缺口的。

值得一看它的特性，看看你能用它完成什么，例如你可以在你的设计中使用自定义媒体查询、自定义选择器、颜色修改器、SVG过滤器和新的伪类。

PreCSS

PreCSS是一个postcss插件，工作方式类似于css预处理器。它可以利用样式文件中的标记之类的SASS。

通过在工作流中引入PreCSS，您可以在CSS代码中使用变量if else语句、for循环、mixin、@extend和@import规则、嵌套和许多其他方便的功能。PreCSS的Github文档为您提供了如何充分利用它的详细说明。

StyleLint

StyleLint是一个现代的CSS Linter，它可以校对和验证您的CSS代码。它使避免错误变得容易，并促使您遵循一致的编码约定。

Stylelint了解最新的CSS语法，因此它可以与前面提到的precss插件一起使用。它还允许您进行自己的配置，甚至检查设置是否有效。

PostCSS Assets

PostssAssets插件是一个方便的CSS文件资源管理器。如果您在URL路径方面遇到问题，这是一个很好的选择，因为PostSS资产将样式表文件与环境变化隔离开来。

您需要定义加载路径、相对路径和基本路径，插件将自动查找您需要的资源。例如，如果需要foobar.jpg图像的正确URL，可以编写以下代码：

body {
 background: resolve('foobar.jpg');
}

Postcss Assets还负责节省缓存，因为如果希望在修改资产时自动更改URL路径，可以将cachebuster变量设置为true。这个智能插件还可以计算图像文件的尺寸（宽度和高度），甚至可以使用预设比例调整它们的大小

CSSNano

如果您需要一个生产站点的优化和缩小的CSS文件，那么有必要查看cssnano。它是一个模块化的插件，由许多较小的单一责任PostSS插件组成。它不仅执行基本的缩小技术，如删除空白，还具有高级选项，使集中优化成为可能。

除了许多其他功能外，cssnano还能够重新调整z-index值、减少自定义标识符、转换长度、时间和颜色值以及删除过时的供应商前缀。

在线咨询

上一篇：网页顶部导航栏设计总结
下一篇：HTML5 Canvas逼真水波纹动画特效

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商