您现在的位置是：网站首页> 编程资料编程资料

详细解读CSS的预编译器PostCSSCSS Transition通过改变Height实现展开收起元素从QQtabBar看css命名规范BEM的详细介绍css实现两栏布局，左侧固定宽，右侧自适应的多种方法CSS 实现Chrome标签栏的技巧CSS实现两列布局的N种方法CSS实现隐藏搜索框功能(动画正反向序列)CSS3中Animation实现简单的手指点击动画的示例详解CSS中的特指度和层叠问题详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)关于CSS浮动与取消浮动的问题

2023-10-23 144人已围观

简介 这篇文章主要介绍了详细解读CSS的预编译器PostCSS,PostCSS与其他CSS预编译器比起来结构更为简洁,需要的朋友可以参考下

提到css预编译器（css preprocessor），你可能想到Sass、Less以及Stylus。而本文要介绍的PostCSS，正是一个这样的工具：css预编译器可以做到的事，它同样可以做到。

“你说的我都懂，那为什么要用它？”


套装与单件

如果Sass等预编译器是新定义了一种模板语言，然后将其转化为css的话，PostCSS则是更纯粹地对css本身做转换。

回想一下你是如何学习使用css预编译器的：了解到有这样一种可以转化为css的语言，它有很多特性，变量、嵌套、继承等等，每一种特性都通过一定语法实现。大概就像是递给你一个已经封装好的工具箱（量产型？），你可以在里面找有用的东西。

那PostCSS是怎样呢？PostCSS就像只递给你一个盒子，但告诉你你可以从旁边的陈列柜取走自己想要的工具放进盒子打包带走。如果你觉得陈列柜里的不够好，PostCSS还可以帮你打造你自己的工具。所以，使用PostCSS，你可以仅取所需。
2015720165145557.png (100×100)

这就是PostCSS的模块化（modular）风格。它作为一个css转换工具，自身很小，其所有的转换功能都是插件，因此可以个性化配置。


PostCSS的简要原理

PostCSS自身只包括css分析器，css节点树API，source map生成器以及css节点树拼接器。

css的组成单元是一条一条的样式规则（rule），每一条样式规则又包含一个或多个属性&值的定义。所以，PostCSS的执行过程是，先css分析器读取css字符内容，得到一个完整的节点树，接下来，对该节点树进行一系列转换操作（基于节点树API的插件），最后，由css节点树拼接器将转换后的节点树重新组成css字符。期间可生成source map表明转换前后的字符对应关系：
2015720165213722.png (324×412)

比较有意思的是，PostCSS的插件其实都是JavaScript函数，它们使用PostCSS的节点树API，对css节点树进行不同的转换。

插件预览

所有插件都可以在PostCSS的主页中查询到，这里只选取一小部分示意一下。
Autoprefixer

PostCSS最有名的插件是Autoprefixer。如名所示，可以自动为你添加浏览器私有前缀。它的添加值会参考Can I Use及你设定的浏览器支持范围，因此相当可靠。下面是一个示例（以我设定的浏览器支持范围）：

CSS Code复制内容到剪贴板
  1. .container{   
  2.     display: flex;   
  3. }  

编译后：

CSS Code复制内容到剪贴板
  1. .container{   
  2.     display: -webkit-box;   
  3.     display: -webkit-flex;   
  4.     display: -ms-flexbox;   
  5.     display: flex;   
  6. }  

postcss-nested&postcss-mixins

在刚开始使用PostCSS时，我就想到要用PostCSS实现我在Sass中最常用的特性。所以，我找到了postcss-nested和postcss-mixins。将它们结合起来后，就可以做到这样：

CSS Code复制内容到剪贴板
  1. @define-mixin clearfix{   
  2.     &:after{   
  3.         display: table;   
  4.         clear: both;   
  5.         content: " ";   
  6.     }   
  7. }   
  8.   
  9. .column-container{   
  10.     color: #333;   
  11.     @mixin clearfix;   
  12. }  

编译后：

CSS Code复制内容到剪贴板
  1. .column-container{   
  2.     color: #333;   
  3. }   
  4.   
  5. .column-container:after{   
  6.     display: table;   
  7.     clear: both;   
  8.     content: " ";   
  9. }  

到这里，你是否已经有了“预编译器可以做到的它也可以做到”的感觉呢？
如何使用PostCSS

我个人推荐结合Gulp使用，本文在此只介绍gulp-postcss的用法。

gulp-postcss及插件都是npm，首先，使用npm install将它们分别安装到项目目录中（会位于node_modules）。然后，编辑glupfile.js，将PostCSS注册为Gulp的一个任务。以下是一个结合使用了Autoprefixer、postcss-simple-vars、postcss-mixins、postcss-nested4个插件，且生成source map文件的例子：

CSS Code复制内容到剪贴板
  1. var gulp = require("gulp");   
  2. var postcss = require("gulp-postcss");   
  3. var autoprefixer = require('autoprefixer-core');   
  4. var postcssSimpleVars = require("postcss-simple-vars");   
  5. var postcssMixins = require("postcss-mixins");   
  6. var postcssNested = require("postcss-nested");   
  7. var sourcemaps = require("gulp-sourcemaps");   
  8.   
  9. // Css process.   
  10. gulp.task("postcss", function(){   
  11.     var processors = [   
  12.         postcssMixins,   
  13.         postcssSimpleVars,   
  14.         postcssNested,   
  15.         autoprefixer({   
  16.             browsers: ["Android 4.1", "iOS 7.1", "Chrome > 31", "ff > 31", "ie >= 10"]   
  17.         })];   
  18.   
  19.     return gulp.src(["./stylesheets/src/*.css"])   
  20.         .pipe(sourcemaps.init())   
  21.         .pipe(postcss(processors))   
  22.         .pipe(sourcemaps.write("."))   
  23.         .pipe(gulp.dest("./stylesheets/dest"));   
  24. });  

在上面这段代码中，processors是一个数组，定义了用到的PostCSS插件。PostCSS会按照定义顺序依次执行插件，因此，在结合多个插件使用时，请注意它们的位置。
自定义转换

此外，你可以很容易地创建你自己的转换（还记得前面说过PostCSS的插件都是JavaScript函数吧？）。例如，下面是一个自定义的转换方法，它将css代码中的带有rem单位的值，更改为px的值。

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网