[转] Postcss

作者: 谢大见 | 来源:发表于2018-03-26 16:57 被阅读0次

    相关前言

    image.png

    目前,在工程化开发中,使用最多的应该就是Less、Sass和Stylus。首先,还是介绍一下它们吧。它们有个统一的名字——css预处理器。何为CSS预处理器?

    css预处理器给出了非常可行的解决方案:

    变量:就像其他编程语言一样,免于多处修改。

    Sass:使用「$」对变量进行声明,变量名和变量值使用冒号进行分割
    Less:使用「@」对变量进行声明

    Sass:它的方式是三者中最差的,不存在全局变量的概念
    Less:它的方式和js比较相似,逐级往上查找变量
    Stylus:它的方式和Less比较相似,但是它和Sass一样更倾向于指令式查找
    嵌套:对于css来说,有嵌套的写法无疑是完美的,更像是父子层级之间明确关系

    三者在这处的处理都是一样的,使用「&」表示父元素

    介绍

    PostCSS是一个利用JS插件来对CSS进行转换的工具,这些插件非常强大,强大到无所不能。其中,Autoprefixer就是众多PostCSS插件中最流行的一个。

    截至目前(2017年7月)PostCSS已经有超过200个插件,你可以插件列表查找有没有你所需要的插件。如果你想自己写个插件,据说这是一个不错的主意,而且非常简单(前提掌握node.js,不过我还没学会呢),你可以试着搞点事

    为什么使用 Postcss

    现如今各种插件和工具多的数不胜数,比如gulp、grunt、webpack,less、scss等也都有对应其工具的相应插件,还有合并、压缩、浏览器自动刷新等实用插件,那Postcss存在的意义是什么呢?

    模块化?!如果你的项目用的webpack或者是gulp,那么相应的要安装一堆处理各种文件的插件。Postcss可以说就是将你项目中所有处理css的插件进行了一个二次封装,让你基于Postcss这个平台来完成,用Postcss它独有的一套体系来处理项目中的css文件。也就是说如果你的项目中想使用Postcss,想感受Postcss的独特魅力,那么less、scss、clean-css等处理css的插件全部替换成Postcss其独特的插件就行了。

    它还有一些特性,例如创建了一个插件功能极强的生态系统,具有模块化需要什么用什么(precss就是一个集成了类似SASS很多方法的包),相比其他的CSS预处理器它的优势主要体现在以下几个方面:

    1. 拥有极高的处理性能(3倍以上的处理速度
    2. 你既可以写正常的CSS,也可以结合LESS或者SASS一起编写
    3. 对Source Map支持更好
    4. 他的插件真的太多太强大太便利了

    PostCSS安装及使用

    PostCSS一般是结合自动化工具使用,如果要单独使用可以安装PostCSS CLI

    因为我用的是webpack,这里介绍一下webpack的使用

    npm i  postcss-loader autoprefixer --save-dev
    

    webpack.config.js 文件

        module: {
            rules: [ 
                {
                    test: /\.css$/,
                    loader: "style-loader!css-loader!postcss-loader"
                },
            ]
        },
    

    postcss.config.js 配置文件

    module.exports = {
        plugins: [
            require('autoprefixer')   //最常用的postcss插件,自动补全css浏览器前缀
        ]
    }
    

    autoprefixer 插件

    那么好,知道了Postcss是个什么鬼,来认识一下最出名(最实用)的插件autoprefixer

    autoprefixer是让你可以偷懒的神器,如果你的项目是PC端的,并且产品大大或者项目经理大大要你兼容IE8~9,是不是很头疼。别怕,用了autoprefixer,写正常的标准css就好了,autoprefixer会自动帮你添加浏览器前缀的,哈哈。

    Postcss还有许多功能,压缩合并它都可以,只要你感兴趣,完全可以运用到项目当中(不建议,当然如果你愿意折腾,请随意)。

    相关文章

      网友评论

        本文标题:[转] Postcss

        本文链接:https://www.haomeiwen.com/subject/ckuktftx.html