PostCSS一种更优雅、更简单的书写CSS方式

浅浅的花香味﹌ 2022-08-20 12:16 173阅读 0赞

[Sass][]团队创建了[Compass][]大大提升CSSer的工作效率,你无需考虑各种浏览器前缀兼,只需要按官方文档的书写方式去写,会得到加上浏览器前缀的代码,如下:

.row {
      @include display-flex;
    }

会得到如下代码:

.row {
      display: -webkit-flex; 
      display: flex;
    }

但是, 做为一个长期用原生CSS书写方式的CSSer,不太习惯去官方查文档,再以`@include`方式书写。

那么问题来了,我只能放弃高效率方式么?  
其实不然, [Autoprefixer][]能够帮助你。  
其实, [Autoprefixer][]也仅仅是[PostCSS][]其一个最出名的插件。  
来吧, 来看张图:

--------------------

## ![23444-20150830170253469-1653052336.png][] ##

这样,以一种原生CSS的书写方式, 然后还可以帮你解决浏览器前缀、IE兼容、以下一代CSS书写方式兼容现在浏览器, 是不是很酷?

> 哦, 其实应该说更简单、更优雅, 不用查文档, 不用`@include`。  
> 这个就是Twitter推出的PostCSS, 据说Google、阿里、Shopify, Twitter就不用说了, 他们都在用PostCSS。

上图有用到的PostCSS插件有:

[CSSNext][], 可以看到下一代CSS开始支持`变量`了,这是否意味着'Sass'、'Less'不再重要了? 更多方法法可访问:[http://cssnext.io/features/][http_cssnext.io_features]  
[Autoprefixer][], 知名度很高的PostCSS插件,支持`Gulp`、`Webpack`、`Grunt`、`Compass`等,了解更多可访问: [https://github.com/postcss/autoprefixer][Autoprefixer]  
[CSS Grace][], 国内大神写的实现了大部分常用的 `IE Hack` 的插件, 中文文档: [https://github.com/cssdream/cssgrace/blob/master/README-zh.md][https_github.com_cssdream_cssgrace_blob_master_README-zh.md]

当然还有更多PostCSS插件可访问: [http://postcss.parts][http_postcss.parts]

好了,下面看下PostCSS一些基本使用方法吧:

## 准备 ##

> 构建工具为[Gulp][]  
> 基于[PostCSS][]  
> PostCSS插件 [CSSNext][] 用下一代CSS书写方式兼容现在浏览器  
> PostCSS插件 [Autoprefixer][] 为CSS补全浏览器前缀  
> PostCSS插件 [CSS Grace][] 让CSS兼容旧版IE

## package.json ##

{
      "name": "postcss usage",
      "version": "1.0.0",
      "description": "postcss cssnext",
      "main": "gulpfile.js",
      "dependencies": {
        "autoprefixer": "^5.2.0",
        "autoprefixer-core": "^5.2.1",
        "cssgrace": "^2.0.2",
        "gulp": "^3.9.0",
        "gulp-less": "^3.0.3"
      },
      "devDependencies": {
        "autoprefixer": "^5.2.0",
        "autoprefixer-core": "^5.2.1",
        "cssgrace": "^2.0.2",
        "cssnext": "^1.8.4",
        "gulp-postcss": "^6.0.0",
        "postcss": "^4.1.16"
      },
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
      },
      "keywords": [
        "postcss",
        "gulp"
      ],
      "author": "givebest",
      "license": "ISC"
    }

## gulpfile.js ##

## 安装 ##

npm install

## 使用 ##

gulp

> 详细项目地址在: [https://coding.net/u/givebest/p/postcss-usage/git][https_coding.net_u_givebest_p_postcss-usage_git]

转载：http://www.cnblogs.com/givebest/

[Sass]: http://sass-lang.com/
[Compass]: http://compass-style.org/
[Autoprefixer]: https://github.com/postcss/autoprefixer
[PostCSS]: https://github.com/postcss/postcss
[23444-20150830170253469-1653052336.png]: /images/20220731/0492965e844f4b10989ed27e9e157bd9.png
[CSSNext]: https://github.com/cssnext/cssnext
[http_cssnext.io_features]: http://cssnext.io/features/
[CSS Grace]: https://github.com/cssdream/cssgrace
[https_github.com_cssdream_cssgrace_blob_master_README-zh.md]: https://github.com/cssdream/cssgrace/blob/master/README-zh.md
[http_postcss.parts]: http://postcss.parts/
[Gulp]: https://github.com/gulpjs/gulp
[https_coding.net_u_givebest_p_postcss-usage_git]: https://coding.net/u/givebest/p/postcss-usage/git