浅谈PostCSS

前言

PostCSS is a tool for transforming styles with JS plugins. These plugins can lint your CSS, support variables and mixins, transpile future CSS syntax, inline images, and more.

PostCSS是一个基于JS插件的转换样式的工具。PostCSS插件可以像预处理器,它们可以优化和autoprefix代码;可以添加未来语法;可以添加变量和逻辑;可以提供完整的网格系统;可以提供编码的快捷方式......还有很多很多。

PostCSS不是

  • 尽管表面上它看起来是一个预处理器,其实它不是一个预处理器

  • 尽管表面上它看起来是一个后处理器,其实它也不是一个后处理器

  • 尽管它可以促进、支持未来的语法,其实它不是未来语法

  • 尽管它可以提供清理、优化代码这样的功能,其实它不是清理、优化代码的工具

  • 它不是任何一件事情,这也意味者它潜力无限,你可以根据自己的需要配置你需要的功能

PostCSS的优点

  • 多样化的功能插件,创建了一个生态的插件系统

  • 根据你需要的特性进行模块化

  • 快速编译

  • 创建自己的插件,且具可访问性

  • 可以像普通的CSS一样使用它

  • 不依赖于任何预处理器就具备创建一个库的能力

  • 可以与许多流行工具构建无缝部署

webpack设置

现在大多数同事使用的还都是Gulp,大漠老师写过Gulp设置的文章,很详细,我就不复制粘贴了。传送门在这:PostCSS深入学习:Gulp设置
我这边讲解下webpack的基本配置(我们默认你已经了解NPM包等知识...github原址:PostCSS for Webpack
首先

npm install postcss-loader --save-dev

在webpack配置文件中设置postcss

var precss       = require('precss');
var autoprefixer = require('autoprefixer');

module.exports = {
    module: {
        loaders: [
            {
                test:   /\.css$/,
                loader: "style-loader!css-loader!postcss-loader"
            }
        ]
    },
    postcss: function () {
        return [precss, autoprefixer];
    }
}

你需要安装两个插件来实现这个例子
npm install precss --save-dev
npm install autoprefixer --save-dev

PostCSS插件

PostCSS的核心就是它的插件系统。如何选择PostCSS的插件,这一切取决于你的心情。

查找插件

PostCSS在Github上有一个插件仓库,其主页维护了插件列表。这个插件列表会经常更新,所以说这个地方是一个相当可靠的地方,可以看到插件的发展,在哪方面可用。

PostCSS Twitter

你也可以关注PostCSS的Twitter账号。@PostCSS。每有新插件发布。Twitter上就会发布,所以你只需关注这个账号就可以发现。

几款让你用上就离不开的插件

以下介绍几款本农正在使用的几款插件

PreCSS

npm install precss --save-dev

PreCSS语法和Sass极其相似,你可以毫不费力的使用它。

嵌套

PreCSS中的嵌套同Sass或LESS中的实现方法一样,都是通过在选择器的大括号内嵌套选择器。例如:

.menu {
    width: 100%;
    a {
        text-decoration: none;
    }
    &::before {
        content: '';
    }
}

变量

在PreCSS中保持了类似Sass声明变量的语法,在$符号后面紧跟变量名,然后变量名后面有冒号:,其后再是变量值。

$text_color: #232323;

body {
    color: $text_color;
}

条件

在PreCSS中也有条件命令这样的特性,其语法和Sass的相同,也是使用@if和@else;例如:

$column_layout: 2;

.column {
    @if $column_layout == 2 {
        width: 50%;
        float: left;
    }   @else {
        width: 100%;
    }
}

Imports

通过@import可以将多个CSS文件合并成一个。例如:

import 'normalize.css';

小结

作为PostCSS中强大的预处理器PreCSS插件包,它有很多特点:

  • PreCSS中的嵌套和Sass或LESS中的嵌套一样

  • PreCSS声明变量像Sass的语法

  • 在PreCSS中也有@if和@else这样的条件命令的功能特性

  • @for和@each循环是有效的

  • 在PreCSS中使用@define-mixin mixin_name $arg1,$arg2{...}语法来声明

  • 在PreCSS中使用@mixin mixin_name pass_arg1, pass_arg2;语法来调用

  • @mixin-content使用方法类似于Sass中的@content

  • PreCSS中使用@define-extend extend_name{...}来声明可扩展的代码块

  • PreCSS中使用@extend extend_name语法来调用声明的代码扩展块

  • 在PreCSS可以使用@import中导入CSS文件

Autoprefixer

npm install autoprefixer --save-dev

在我们使用Sass的时候我们会经常使用Compass库中使用@include box-sizing(border-box);来解决box-sizing属性在各浏览器私有前缀的问题。但它本身存在一些问题:

  • 要知道属性需要的前缀,然后才能决定如何部署混合宏

  • 必须知道混合宏的名称和如何调用混合宏

  • 必须时刻关注浏览器对每个属性的私有前缀变化(比如,box-sizing现在就不再需要前缀)

当我们使用Autoprefixer的时候发现这些都不是问题,它可以根据CanIUse.com数据对属性自动添加浏览器的私有前缀。
书写没有私有前缀的css(实际上是忘了写...)

:fullscreen a {
    display: flex
}

Autoprefixer会根据当前不同浏览器支持的特性来为你添加前缀,编译后的代码:

:-webkit-full-screen a {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex
}
:-moz-full-screen a {
    display: flex
}
:-ms-fullscreen a {
    display: -ms-flexbox;
    display: flex
}
:fullscreen a {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
}

更多关于Autoprefixer的信息可以异步传送门:Autoprefixer的github地址

cssnano

它提供了一个非常强大的CSS优化的插件包cssnano,这个插件包是一个可以即插即用的。它汇集了大约25个插件,只需要执行一个命令,就可以做多方面不同类型的优化。它包括:

  • 删除空格和最后一个分号

  • 删除注释

  • 优化字体权重

  • 丢弃重复的样式规则

  • 优化calc()

  • 压缩选择器

  • 减少手写属性

  • 合并规则

提供个官网的例子

h1::before, h1:before {
    margin: 10px 20px 10px 20px;
    color: #ff0000;
    -webkit-border-radius: 16px;
    border-radius: 16px;
    font-weight: normal;
    font-weight: normal;
}
/* invalid placement */
@charset "utf-8";

编译后

@charset "utf-8";h1:before{margin:10px 20px;color:red;border-radius:1pc;font-weight:400}

更多特性和功能可以一步官网查看。官网传送门:cssnano.co

Sass和PostCSS

如果你对PostCSS的各种特性很感兴趣,但又不想放弃熟练使用的Sass。不用担心,你可以完全把Sass与PostCSS结合使用.
因为你已经使用了Node.js来运行Gulp或webpack和PostCSS.所以使用Sass最简单的方法就是使用LibSass。你只需要安装node-sass.

npm install node-sass --save-dev

然后只需要在配置文件中先对.scss文件进行处理后再用PostCSS进行处理。

小结

当我使用了一次PostCSS后我就深深的爱上了它,我相信你也会有这种感觉。这篇文章只是简单的介绍了一下PostCSS,推荐大漠老师的文章:大漠老师POSTCSS

你可能感兴趣的文章

1 条评论
kissyoudyb · 2016年04月15日

嘎嘎嘎嘎

回复

载入中...
多喝热水早点睡 多喝热水早点睡

769 声望

发布于专栏

早点儿睡

前端呻吟杂文

25 人关注