首頁  >  文章  >  web前端  >  利用PostCSS跳進未來的CSS- JS-Republic's Blog

利用PostCSS跳進未來的CSS- JS-Republic's Blog

巴扎黑
巴扎黑原創
2017-05-01 09:46:232037瀏覽

  在說明 PostCSS是什麼之前,我們先理解PostCSS不是什麼。

  實質上,人們第一次聽到 PostCSS時,他們傾向於認為這是一款新出的CSS預處理器,類似SASS、LESS和Stylus。

  如果你想把它當作預處理器來用,那麼它會如預處理器那樣工作。同時它也有後處理器、最佳化工具、相容未來語法的插件......你想要的功能應有盡有。

  PostCSS的主要目的是能讓你使用各種工具來滿足你的需求。

  所以你應該把 PostCSS當作一個建構工具。它能讓你用各類JavaScript插件來維護你的CSS。 這些外掛可以在postcss.parts 這裡找到

  由於有太多的插件,我們將透過這篇文章檢閱一下那些常用且強大的插件。

  同時你也會了解如何搭配使用Gulp建立一個單一任務來處理CSS檔案。

  Autoprefixer

  如果你之前曾用過預處理器,你該體驗到不必再寫前綴是件多麼愉悅的事。

  舉個例子,不必再這樣寫

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

#   只需

:fullscreen a {
 display: flex
}

  如果你想自己動手試試,可以用這個可互動demo http://autoprefixer.github.io

#   文檔戳記這裡:github.com/postcss/autoprefixer

#   PreCSS

#   即使PostCSS本不是SASS那樣的預處理器,但你仍然可以透過一些插件來處理Sass類格式的檔案。

  首選的插件是PreCSS,它集合了大量的PostCSS插件 ,讓你可以編寫Sass語法的樣式。

  我邀請你閱讀 文件來了解更多細節,也可以玩玩這個可互動 demo 來測試各種可能性。

  CssNext

#   CSS4,下一代CSS,承諾將改變CSS的書寫方式和選擇器的使用方式。

  遺憾的是,這個版本的規範依然在製定中,並且尚未公佈發行時間。

  幸運的是,如果你想使用下一代CSS的一些功能,這裡有款叫CssNext的插件能幫助你。

  CSSNext的官網列出了所有支援的功能:cssnext.io/features/

  你也可以在這裡玩:cssnext.io/playground/

#   CssNano

#   最後但同樣重要的,關於優化。 CssNano能利用不同的modules壓縮和優化你的CSS程式碼。

  我推薦你禁用the z-index,因為它很可能會擾亂你原本正常的z-index。

  你可以檢閱這份可優化清單:cssnano.co/optimisations/ 你也可以在Gitter上和CssNano的創造者聊聊:gitter.im/ben-eb/cssnano

  現在,我們來看看如何利用Gulp使用這些插件。

  Gulp x PostCSS

  Gulp

#   首先,以dev dependencies 的方式安裝Gulp、Gulp Load Plugins 和Gulp PostCSS 。在控制台執行以下命令:

npm i -D gulp gulp-load-plugins gulp-postcss

  在你需要使用Gulp的地方建立一個 gulpfile.js 並加入以下程式碼。

var gulp = require('gulp'),

  新增 Gulp Load PLugins的程式碼:

$ = require('gulp-load-plugins')();

  Gulp Load Plugins依賴會 透過$呼叫你需要的插件。

  PostCSS

#   接下來,同樣以dev dependency的方式需要安裝所需的PostCSS插件

npm i -D autoprefixer cssnano cssnext precss

  安裝好後加入到gulpfile.js

// PostCSS Plugins
var autoprefixer = require('autoprefixer'),
cssnext = require('cssnext'),
precss = require('precss'),
cssnano = require('cssnano');

  接下來開始寫 Gulp CSS任務

// Gulp task to process CSS with PostCSS plugins 
gulp.task('css', function() {

 });

#   在這個任務中,我們先用一個變數來保存準備用到的PostCSS外掛程式

var processors = [autoprefixer, cssnext, precss, cssnano({zindex: false})];

  設定CssNano的 zindex:false 禁止其重設我們的 z-index。

  為了處理CSS文件,我們需要檢索以下文件:

return gulp.src('./source/css/style.css')

  接著透過processors變數內的PostCSS插件來處理CSS檔案。

  使用pipe方法串聯起處理過程

.pipe($.postcss(processors))

  用以下程式碼輸出處理完成的檔案

.pipe(gulp.dest('./public/assets/stylesheets'));

#   以上全部,就是你使用PostCSS 插件處理CSS時所要做的事。

var gulp = require('gulp'),
$ = require('gulp-load-plugins')();

// PostCSS Plugins
var autoprefixer = require('autoprefixer'),
cssnext = require('cssnext'),
precss = require('precss'),
cssnano = require('cssnano');

// Gulp task to process CSS with PostCSS plugins
gulp.task('css', function() {
var processors = [autoprefixer, cssnext, precss, cssnano({zindex: false})];

return gulp.src('./source/css/style.css')
.pipe($.postcss(processors))
.pipe(gulp.dest('./public/assets/stylesheets'));
});
  在 Tuts+上有份完整且詳細的指南,我強烈推薦你讀讀:webdesign.tutsplus.com/series/postcss-deep-pe–cms-889

#   我也利用這些PostCSS插件創造了一份boilerplate樣板,可以幫你快速上手: /github.com/PierrickGT/PCGB

  blog.js-republic.com/jump-into-the-future-of-css-with-postcss/###

以上是利用PostCSS跳進未來的CSS- JS-Republic's Blog的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn