關於PostCSS的一點小科普

Zheaoli發表於2017-12-14
CSS

PostCSS起源於2013年9月，發展到現在，已經有很多開發者在工作中使用它。如果你尚未接觸過PostCSS，這篇文章正適合你。

PostCSS是一個使用JavaScript外掛來轉換CSS的工具。

PostCSS本身很小，其只包含CSS解析器，操作CSS節點樹的API，資源生成器（譯者注1：原文是source map），以及一個節點樹字串化工具。所有的黑魔法都是通過利用外掛實現的。

截止目前，PostCSS的生態圈內已經擁有超過100種外掛。這些外掛可以做太多的事情，比如lint（譯者注2：一種用來檢測CSS程式碼的工具），新增vendor prefixes（譯者注3：新增瀏覽器核心字首，可以使用瀏覽器的一些獨有特性），允許使用最新的CSS特性，在你的CSS裡提供統計資料，或者是允許你使用Sass，Less或是Stylus等CSS前處理器。

讓我們看看以下十種外掛

Autoprefixer

根據使用者的使用場景來解析CSS和新增vendor prefixes（前文注2）。

PostCSS Focus

一種利用鍵盤操作為每個**:hover新增:focus選擇器的PostCSS**外掛。

PreCSS

一個允許你在程式碼中使用類似Sass標記的外掛。

Stylelint

一種強大的，先進的可以使你在CSS樣式中保持一致性，避免錯誤的CSS linter工具。

PostCSS CSS Variables

一種將使用者自定義CSS變數（CSS variables）轉化為靜態樣式的外掛。

PostCSS Flexbugs Fixes

一種用於修復flexbug的bug的外掛。

PostCSS CSSnext

一種可以讓你使用CSS最新特性的外掛。它通過將最新的CSS特性轉變為現階段瀏覽器所相容的特性，這樣你不用再等待瀏覽器對某一特定新特性的支援。

PostCSS CSS Stats

一種支援cssstats的外掛。這個外掛將會返回一個cssstatus物件，這樣你可以使用它來進行CSS分析。

PostCSS SVGO

優化在PostCSS中內聯SVG。

PostCSS Style Guide

一種可以自動生成風格指導的外掛。將會在Markdown中生成CSS註釋，並在生成的HTML文件中顯示。

如果你想編寫自己的外掛，並希望將其貢獻給社群的話，請確保你是先看過guidelines這篇文件還有PostCSS Plugin Boilerplate這篇官方文件。

在你的工作中使用PostCSS

PostCSS是用JavaScript所編寫的，這使得我們在Grunt，Gulp或Webpack等常用的前端構建工具中使用它變得非常方便。

下面是我們使用Autoprefixer外掛的示例。

npm install autoprefixer --save-dev

Gulp
如果你使用Gulp，那麼你需要安裝gulp-postcss。

npm install --save-dev gulp-postcss

gulp.task('autoprefixer', function () {
    var postcss      = require('gulp-postcss');
    var autoprefixer = require('autoprefixer');

    return gulp.src('./src/*.css')
    .pipe(postcss([ autoprefixer({ browsers: ['last 2 versions'] }) ]))
    .pipe(gulp.dest('./dest'));
});
複製程式碼

Grunt
如果你使用Grunt，那麼你需要安裝grunt-postcss。

npm install grunt-postcss --save-dev

module.exports = function(grunt) {
    grunt.loadNpmTasks('grunt-postcss');

    grunt.initConfig({
        postcss: {
            options: {
                    map: true,
                processors: [
                    require('autoprefixer')({
                        browsers: ['last 2 versions']
                    })
                ]
            },
            dist: {
                src: 'css/*.css'
            }
        }
    });

    grunt.registerTask('default', ['postcss:dist']);

};
複製程式碼

Webpack
如果你使用Webpack，那麼你需要安裝postcss-loader。

npm install postcss-loader --save-dev

var autoprefixer = require('autoprefixer');

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

關於怎麼整合PostCSS，你可以從這裡PostCSS repo獲取到幫助。

最後最後的誠心安利~

在有些時候，在新技術，新工具，新框架釋出的時候，去使用並觀察其發展趨勢無疑是一種明智的行為。現在，PostCSS已經發展到一個相當成熟的階段，我強烈建議你在你的工作中使用它。因為它現在已經在工程中被廣泛的使用，同時在未來一段時間內它不會發生太大的變化。

關於翻牆（硬廣）

這只是一個友情推薦，我現在使用的是一起艾斯，ipv4，ipv6線路全覆蓋，唔，站長人也很好，基本你的合理需求，站長都能滿足。建議可以試試。

相關文章