PostCSS (一)：认识 PostCSS

CoXie 发布于2019-08-29 13:09 / 3449人阅读

摘要：一认识是一款对进行处理的工具。它主要依赖插件来进行操作。它可以作为一款前置处理器使用就像和等一样，使用等插件来实现提供的变量，，选择器嵌套，等功能。如果你不想自己配置，也可以使用一款已经打包好这些功能，语法与相似的插件来实现。

PostCSS (一)：认识 PostCSS

PostCSS 是一款对 CSS 进行处理的工具。它主要依赖插件来进行操作。当你需要某些功能的时候，只需配置相应的插件即可。它有非常非常丰富的插件，可以涵盖你的开发过程的各个方面。即使没有满足你需要的插件，你也完全可以使用 JavaScript 来开发自己的插件就可以了。

它可以作为一款 CSS 前置处理器( preprocessor ) 使用, 就像 Sass 和 Less 等一样，使用 postcss-simple-vars, postcss-mixins, postcss-nested, postcss-sass-extend 等插件来实现 Sass 提供的变量， mixin，选择器嵌套，extend 等功能。如果你不想自己配置，也可以使用一款已经打包好这些功能，语法与 Sass 相似的插件precss 来实现preprocessor。

它也可以作为一款后处理器 (post processor)来使用，配合这些插件，满足你的需求：

针对浏览器兼容：

如果你想使用未来的 CSS 特性那你可以使用cssnext ；

Autoprefixer，它根据 Can I use… Support tables for HTML5, CSS3, etc 上的数据给属性添加相对应的浏览器前缀。

对老版本的浏览器没有的属性，有postcss-color-rgba-fallback, postcss-will-change等插件对其回退；

针对 CSS 优化

合并媒体查询(media query)有 css-mqpacker 插件；

删掉空格分号，最小化 CSS 文件，有cssnano插件；

提高开发效率

模块化 CSS 有 postcss-import 插件通过@import整合所有模块；

简写 CSS 属性，比如margin-left写作ml, 有postcss-crip插件；

引入第三方字体，postcss-font-magician 插件可以只指定font-family即可，@font-face的代码由插件完成；

生成各种方向的图形，有postcss-triangle插件生成三角形， postcss-circle生成圆形

生成网格系统，有lost 插件
…..

可以看到 PostCSS 的插件就像一座宝库一样，可以从各个方面满足你，如果没有你需要的，那就自己动手写一个也是非常简单的，PostCSS 提供了相应的 API ，只需要一些 JavaScript 代码就能定制满足自己需求的插件。

PostCSS 可以做这么多事，又这么方便简单，你有没有爱上它？

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/112406.html

PostCSS 是个什么鬼东西？

摘要：参考的文章最权威的初认识一个不错的东西理解等插件解析技术大漠的系列文章，应用型很强，推荐一个年龄差不多的开发者的解释一篇稍微理论化解释的文章一个开发模式简单的优劣比较大家也可以直接阅读我的博客前言最近大漠前辈在群里发关于PostCSS的系列文章，但是耗子姐姐又说看了有点云里雾里的感觉，所以这篇文章将按一个思考的角度来理解一下 PostCSS 到底是一个什么东西。 showImg(h...

IamDLY 2019-08-28 18:19 评论0 收藏0
PostCSS自学笔记（二）【番外篇二】

摘要：之前有研究过做过假设，在插件列表中，的插件执行顺序自上而下，一切看起来似乎是没有任何问题的。再有摘自深入设计摘自写的姿势这两张图则应该是说明了我之前的假设，插件中的执行顺序自上而下。先来看看一片来自的这段会不会跟这个有关呢，我先埋个伏笔。图解PostCSS的插件执行顺序文章其实是一系列的早就写完了. 才发现忘了发在SegmentFault上面, 最早发布于https://gitee...

FleyX 2019-08-30 13:57 评论0 收藏0
来学习一下怎么使用postcss吧

摘要：如何使用和上面的一样，加入到即可，如下此处省略行此处省略行此处省略行为了验证插件确实生效了，修改一下文件，如下执行再次重新打包，结果如下这里就介绍这两个插件来抛砖引玉一下其实大部分都会使用已有的一些插件，而很少自己去造轮子。网上关于postcss是什么的介绍真的是太多了。。。简单粗暴的说，postcss就是一款类似babel的样式转换器!多说无益，下面就用一个demo来演示一下pos...

张率功 2019-08-29 11:11 评论0 收藏0
谈谈PostCSS

摘要：它们有个统一的名字预处理器。面对以上问题，预处理器给出了非常可行的解决方案变量就像其他编程语言一样，免于多处修改。回到话题中，之所以会出现向预处理器这样子的解决方案，归根结底还是标准发展的滞后性导致的。前言现在的前端，javascript的发展有目共睹，框架林立。同时，html也是齐头并进，推出了HTML5标准，并且得到了普及。这样的发展却唯独少了一个角色？ CSS，就是这个看似不...

高胜山 2019-08-30 13:47 评论0 收藏0
谈谈PostCSS

摘要：它们有个统一的名字预处理器。面对以上问题，预处理器给出了非常可行的解决方案变量就像其他编程语言一样，免于多处修改。回到话题中，之所以会出现向预处理器这样子的解决方案，归根结底还是标准发展的滞后性导致的。前言现在的前端，javascript的发展有目共睹，框架林立。同时，html也是齐头并进，推出了HTML5标准，并且得到了普及。这样的发展却唯独少了一个角色？ CSS，就是这个看似不...

leap_frog 2019-08-21 17:05 评论0 收藏0