Postcss介绍

9 Feb

PostCSS不是类似Less,Sass,Stylus那样的CSS预处理器,而是一种允许用JS插件来转变样式的工具。看官网的截图:A tool for transforming CSS with JavaScript

postcss

PostCSS的插件很多,本篇先介绍3个常用插件:

  • pre-css
  • autoprefixer
  • css-next

pre-css

pre-css插件是一款css预处理器。语法和主流的sass,stylus,less极其相似,例如同样用嵌套来表示层级,同样用&来表示父选择器等。也支持mixin,extends,条件@if,循环@each等。

具体语法请看github上的例子,如果有css预处理器开发经验,很容易上手,就不多介绍了。

autoprefixer

autoprefixer插件会给根据CanIUse的兼容性去检查你的CSS代码,然后自动为你的CSS代码加上浏览器厂商的私有前缀,一图胜千言:

postcss

例如你的CSS代码:

@keyframes rotate {
  from {
    transform: rotateZ(0deg);
  }
  to {
    transform: rotateZ(360deg);
  }
}

.loading-circle {
  animation: rotate .4s linear infinite;
}

经autoprefixer插件处理后会,CSS代码里自动被添加了浏览器厂商的私有前缀:

@keyframes rotate {
  from {
    -webkit-transform: rotateZ(0deg);
    transform: rotateZ(0deg);
  }
  to {
    -webkit-transform: rotateZ(360deg);
    transform: rotateZ(360deg);
  }
}

.loading-circle {
  -webkit-animation: rotate .4s linear infinite;
  animation: rotate .4s linear infinite;
}

这样程序猿可以专心写自己的代码了,按作者的说法就是可以:Write pPure CSS。

该插件也可以用browserlist来指定需要支持的浏览器和版本。不在browserlist列表里的浏览器和版本不会自动添加私有前缀。在package.json里添加browserlist列表:

{
  ...
  "browserslist": [
    "> 1%",		//全球有超过1%的人使用的浏览器
    "ie 9-10"	//虽然使用者低于1%,但仍旧支持一下
  ]
}

browserlist插件会查询CanIUse上的数据,返回支持的浏览器和版本。autoprefixer插件会给这些浏览器和版本加上私有前缀。例如上例中,ie8及以下就会被华丽地无视。(最后根据browserlist的一个小Demo,真心期待IE9也能早点退出历史舞台)

因为autoprefixer插件被集成进了css-next里,因此我们直接用css-next即可。(browserlist如有需求,还是要手动在package.json里配一下的)

css-next

css-next插件让能让你用上未来的css语法。这牛不是我吹的,见官网标语,有图有真相:

postcss

一图胜千言:变量用—双横线来声明。使用变量时要用var()将变量括起来,看上去有点像JS代码。还提供了不少API,如图中的color函数会将函数参数转成rgba格式。

postcss

更多(也不是很多)API见官网。前端工程师是幸福的,有这么多新的,好玩的技术供你尝试。前端工程师是痛苦的,稍一松懈就落伍了…

我所能理解的优秀的技术或工具,应该能解决现有条件下某些无法解决的痛点。但我能力有限,项目中尝鲜下来,暂时未发现css-next解决了什么其他预处理器如sass,less无法解决的痛点。感觉最大的好处是集成了autoprefixer插件。

webpack集成

将postcss用webpack集成进项目中:

const precss = require('precss');
const cssnext = require('postcss-cssnext');

module.exports = {
  ...
  postcss: [
    precss,
    cssnext
  ],
  module: {
    loaders: [
    ...
      {
        test: /\.[p]?css$/,
        loader: 'style!css!postcss'
      }
    ]
  },
  ...
};

由于css-next里自带autoprefixer插件,因此不必再手动配autoprefixer了。(而且试下来手动单独配autoprefixer的话,webpack会有重复配置的警告)

评论(1)

Leave a Reply

Your email address will not be published. Required fields are marked *