CSSConf 2015 筆記(一) – PostCSS

PostCSS 剛推出時定位很令人疑惑,它不像 Sass, Less 是 Preprocessor,而比較像是一個平台,或者說是 API,本身沒有特定的功能或語法,但可以依照需求裝上各式各樣的 plugin,整合於 node 流程。講者頻頻把 “PostCSS does nothing”當作笑點其實也只有三分是事實啦。幾個基本的部分與一般 CSS 沒什麼不同,除了 :root 可能在宣告變數時當作 scope 來用。

  • root
    :root {
     --array: foo, bar, baz;
     --from: 1;
     --to: 3;
     --icon-exclude: 2;
     --color-danger: red;
    }
    
  • rules
  • declaration
  • comment

既然“PostCSS does nothing”,他到底有什麼好處呢,又比 Sass 好在哪裡呢?因為他是純 javascript 生態系,不需像 Sass/Compass 需要安裝 Ruby,在整個 node 環境中可以和 javascript framework 或 Plugin 用同一套流程來管理。(話說 Ruby 難道不能形成自己的生態系嗎?也許不幸輸給 javascript 了 )

既然 PostCSS 唯有開外掛才能威力百倍,就來介紹幾個不錯的外掛:

  • postcss-simple-vars – 這個是一定要裝的,用 $ 宣告變數(PostCSS 變數宣告是 —foo)
  • cssnano – minify css
  • cssnext –  可使用未來的 CSS(4?) 語法,套件會 compile 成目前的語法

為喜愛寫 Sass 的人所設計,只是它不需要 Ruby

  • precss –  可以寫 preprocessor 的語法,這點可以用來整合舊專案的 code
  • cssnesting – 可以寫像 Sass 的巢狀語法
  • postcss-at-rules-variables – 可以寫類似 Sass “@"小老鼠語法,用在簡單的迴圈、if/else 等  https://github.com/GitScrum/postcss-at-rules-variables

搞怪套件:

這些套件都可以透過 npm 安裝,https://www.npmjs.com/search?q=postcss

$ npm install --save-dev gulp-postcss

用 gulp 來管理 workflow:

var postcss = require('gulp-postcss');
gulp.task('styles', function () {
  return gulp.src('path/to/dev/style.css')
  .pipe(postcss([]))
  .pipe(gulp.dest(path/to/prod))
});

 

《原始影片》

廣告

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

您的留言將使用 WordPress.com 帳號。 登出 / 變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 / 變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 / 變更 )

Google+ photo

您的留言將使用 Google+ 帳號。 登出 / 變更 )

連結到 %s