Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
ウラカタ勉強会 2016年11月度 PostCSS
Search
Urakata
December 01, 2016
Technology
0
220
ウラカタ勉強会 2016年11月度 PostCSS
Urakata
December 01, 2016
Tweet
Share
More Decks by Urakata
See All by Urakata
ウラカタ勉強会 2017年2月度 Vagrantによるローカル仮想環境の構築
urakata
2
300
ウラカタ勉強会 2017年1月度 最近のWebから学ぶデザイン術
urakata
0
210
ウラカタ勉強会 2016年11月度 AdminLTEの有料テンプレートが良かった
urakata
0
310
ウラカタ勉強会 2016年10月度 カタラウ勉強会
urakata
0
180
ウラカタ勉強会 2016年9月度 静的サイトジェネレータを 利用してみよう!
urakata
0
150
ウラカタ勉強会 2016年7月度 事例から学ぶ!Sass大解剖
urakata
0
350
Other Decks in Technology
See All in Technology
神回のメカニズムと再現方法/Mechanisms and Playbook for Kamikai scrumat2025
moriyuya
4
720
大規模サーバーレスAPIの堅牢性・信頼性設計 〜AWSのベストプラクティスから始まる現実的制約との向き合い方〜
maimyyym
6
4.1k
CoRL 2025 Survey
harukiabe
0
100
"プロポーザルってなんか怖そう"という境界を超えてみた@TSUDOI by giftee Tech #1
shilo113
0
180
プロダクトのコードから見るGoによるデザインパターンの実践 #go_night_talk
bengo4com
1
2.3k
JAZUG 15周年記念 × JAT「AI Agent開発者必見:"今"のOracle技術で拡張するAzure × OCIの共存アーキテクチャ」
shisyu_gaku
1
160
Exadata Database Service on Dedicated Infrastructure(ExaDB-D) UI スクリーン・キャプチャ集
oracle4engineer
PRO
3
5.5k
そのWAFのブロック、どう活かす? サービスを守るための実践的多層防御と思考法 / WAF blocks defense decision
kaminashi
0
150
Shirankedo NOCで見えてきたeduroam/OpenRoaming運用ノウハウと課題 - BAKUCHIKU BANBAN #2
marokiki
0
180
小学4年生夏休みの自由研究「ぼくと Copilot エージェント」
taichinakamura
0
620
後進育成のしくじり〜任せるスキルとリーダーシップの両立〜
matsu0228
7
3.2k
Reflections of AI: A Trilogy in Four Parts (GOTO; Copenhagen 2025)
ondfisk
0
110
Featured
See All Featured
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
359
30k
Gamification - CAS2011
davidbonilla
81
5.5k
Build your cross-platform service in a week with App Engine
jlugia
232
18k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Designing for Performance
lara
610
69k
Code Reviewing Like a Champion
maltzj
526
40k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
The World Runs on Bad Software
bkeepers
PRO
72
11k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Fireside Chat
paigeccino
40
3.7k
How to train your dragon (web standard)
notwaldorf
96
6.3k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Transcript
None
デザイナーの中嶋です。 制作会社・フリーを経て 2008年に名案企画に入社。 ただひたすらデザインと マークアップをしてます。 最近、驚いた事 → KABAちゃんの変貌ぶり 自己紹介
None
錬金術に関係あり?
アジェンダ 1. PostCSSとは 2. PostCSSの特長 3. PostCSSを使う 4. おすすめプラグイン 5.
PostCssの現実
PostCSSとは
http://postcss.org/
A tool for transforming CSS with JavaScript JavaScriptでCSSを変換するツール CSS JS
NEW CSS
SassとPostCSSの違い • 変数 • Mixin • 四則演算 • ループ •
ネスト • Extend • 関数 • パーシャル etc... パッケージ化している
変数 SassとPostCSSの違い etc... パーシャル Mixin ネスト 四則演算 ループ 関数 必要なプラグインを選ぶ
PostCSSは • PostCSS本体だけでは、CSSに変更を加える ことはできない。 • プラグインは機能ごとに細かく分けられている • 「プラグイン」を組み合わせて使用する
PostCSSの特長
• カスタマイズ性が高い • パフォーマンスに優れている • 次世代CSSが使える
PostCSSのプラグイン • ネスト • 変数 • 四則演算 • Mixin、Extend •
ループ、条件分岐 • パーシャル • 画像サイズ取得 • 独自プロパティ • ベンダープリフィックス • プロパティの並び替え • flexboxのバグ修正 • フォールバック • コードチェック • 圧縮 • メディアクエリをまとめる • 出力コードの整形 好みのプラグインを組み合わせて使う
PostCSSのプラグイン http://postcss.parts/
PostCSSのパフォーマンス
次世代CSSが利用できる W3Cで仕様策定中の次世代 CSS をパッケージ化
PostCSSを使う
PostCSSのコンパイル コンパイルにはタスクランナーが必要
インストール $ npm i gulp-postcss --save-dev
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')) });
プラグインを追加する 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')) });
おすすめプラグイン
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
cssnext npm install --save-dev postcss-cssnext 最新のCSS構文が使えるプラグイン • 変数 • カスタムセレクター
• カラー関数 etc...
CSS MQPacker メディアクエリをまとめてくれるプラグイン npm install --save-dev css-mqpacker
CSS MQPacker
PostCSSの現実
• Sassがデファクトスタンダード • Sassの拡張として使うのが良い • 次世代CSSは使い方に注意が必要
まとめ
• PostCSSはカスタマイズして使うもの • 次世代CSSは使い方に注意が必要 • パフォーマンスに優れているので、大型案件の 載せ替えにはメリットがありそう • 無理にSass移行は考えず、便利プラグインのみ を使用するのが現実的
おしまい。 ありがとうございました。