ウラカタ勉強会 2016年11月度 PostCSS

Transcript

2. デザイナーの中嶋です。 制作会社・フリーを経て 2008年に名案企画に入社。 ただひたすらデザインと マークアップをしてます。 最近、驚いた事 → KABAちゃんの変貌ぶり 自己紹介
4. 錬金術に関係あり？
5. アジェンダ 1. PostCSSとは 2. PostCSSの特長 3. PostCSSを使う 4. おすすめプラグイン 5. PostCssの現実
6. PostCSSとは
7. http://postcss.org/
8. A tool for transforming CSS with JavaScript JavaScriptでCSSを変換するツール CSS JS NEW CSS
9. SassとPostCSSの違い • 変数 • Mixin • 四則演算 • ループ • ネスト • Extend • 関数 • パーシャル etc... パッケージ化している
10. 変数 SassとPostCSSの違い etc... パーシャル Mixin ネスト 四則演算 ループ 関数 必要なプラグインを選ぶ
11. PostCSSは • PostCSS本体だけでは、CSSに変更を加える ことはできない。 • プラグインは機能ごとに細かく分けられている • 「プラグイン」を組み合わせて使用する
12. PostCSSの特長
13. • カスタマイズ性が高い • パフォーマンスに優れている • 次世代CSSが使える
14. PostCSSのプラグイン • ネスト • 変数 • 四則演算 • Mixin、Extend • ループ、条件分岐 • パーシャル • 画像サイズ取得 • 独自プロパティ • ベンダープリフィックス • プロパティの並び替え • flexboxのバグ修正 • フォールバック • コードチェック • 圧縮 • メディアクエリをまとめる • 出力コードの整形 好みのプラグインを組み合わせて使う
15. PostCSSのプラグイン http://postcss.parts/
16. PostCSSのパフォーマンス
17. 次世代CSSが利用できる W3Cで仕様策定中の次世代 CSS をパッケージ化
18. PostCSSを使う
19. PostCSSのコンパイル コンパイルにはタスクランナーが必要
20. インストール $ npm i gulp-postcss --save-dev
21. gulpfile.js var gulp = require('gulp'); var postcss = require('gulp-postcss'); gulp.task("css", function() { return gulp.src('./src/style.css') .pipe(postcss([])) .pipe(gulp.dest('./css')) });
22. プラグインを追加する var gulp = require('gulp'); var postcss = require('gulp-postcss'); gulp.task("css", function() { return gulp.src('./src/style.css') .pipe(postcss([ require('cssnano'), require('autoprefixer')({ browsers: ['last 2 versions'] }) ])) .pipe(gulp.dest('./css')) });
23. おすすめプラグイン
24. Autoprefixer gulp.task("css", function() { return gulp.src('./src/style.css') .pipe(postcss([ require('autoprefixer')({ browsers: ['last 2 versions'] }) ])) .pipe(gulp.dest('./css')) }); ベンダープレフィックスを追加するプラグイン npm install --save-dev postcss-cssnext
25. cssnext npm install --save-dev postcss-cssnext 最新のCSS構文が使えるプラグイン • 変数 • カスタムセレクター • カラー関数 etc...
26. CSS MQPacker メディアクエリをまとめてくれるプラグイン npm install --save-dev css-mqpacker
27. CSS MQPacker
28. PostCSSの現実
29. • Sassがデファクトスタンダード • Sassの拡張として使うのが良い • 次世代CSSは使い方に注意が必要
30. まとめ
31. • PostCSSはカスタマイズして使うもの • 次世代CSSは使い方に注意が必要 • パフォーマンスに優れているので、大型案件の 載せ替えにはメリットがありそう • 無理にSass移行は考えず、便利プラグインのみ を使用するのが現実的
32. おしまい。 ありがとうございました。