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
PostCSS 5.0: for Custom CSS Preprocessing
Search
Masaaki Morishita
August 30, 2015
Programming
10
1k
PostCSS 5.0: for Custom CSS Preprocessing
at Back to Basics, CSS event in Japan
Masaaki Morishita
August 30, 2015
Tweet
Share
More Decks by Masaaki Morishita
See All by Masaaki Morishita
PostCSS: Build your own CSS processor
morishitter
6
4.5k
Houdini: Abracadabra CSS
morishitter
1
750
Modern CSS: architecture, future specs and build flow
morishitter
13
2.4k
PostCSS and cssnext
morishitter
11
1.6k
PostCSS for beginners
morishitter
6
1.3k
CSSfmt
morishitter
2
190
Introduction to CSS Architecture
morishitter
3
320
Introduction to PostCSS
morishitter
6
1.6k
Yet Another CSS Preprocessor
morishitter
1
5.5k
Other Decks in Programming
See All in Programming
「2024年版 Kotlin サーバーサイドプログラミング実践開発」の補講 〜O/Rマッパー編〜
n_takehata
2
260
OpenAI/Gemini APIを使って EPUBを翻訳するCLIツールをつくってみた
tomiyan
0
790
Exploring the Gradually Lost Technical Skills in the Cloud Native Era
hwchiu
2
3.9k
3 Effective Rules for Success with Signals in Angular
manfredsteyer
PRO
0
120
From Spring Boot 2 to Spring Boot 3 with Java 22 and Jakarta EE
ivargrimstad
0
1.9k
CSC307 Lecture 06
javiergs
PRO
0
360
【Go言語】golangci-lintの使い方
tomo1227
0
270
Modern Angular: Renovation for Your Applications
manfredsteyer
PRO
0
140
Ruby メモリ管理 プログラミング
megmogmog1965
0
130
MIERUNE BBQにおけるユーザー中心設計()
mierune
PRO
1
110
Google's Recipe for Scaling (Web) Security – LocoMocoSec 2024
lweichselbaum
0
170
Android開発者のための Kotlin Multiplatform入門
ntaro
0
190
Featured
See All Featured
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
44
4.7k
Typedesign – Prime Four
hannesfritz
37
2.2k
Scaling GitHub
holman
458
140k
StorybookのUI Testing Handbookを読んだ
zakiyama
15
4.9k
Web development in the modern age
philhawksworth
203
10k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
662
120k
Fashionably flexible responsive web design (full day workshop)
malarkey
399
65k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
18
1.2k
Building Flexible Design Systems
yeseniaperezcruz
323
37k
Adopting Sorbet at Scale
ufuk
71
8.8k
Documentation Writing (for coders)
carmenintech
63
4.2k
Building an army of robots
kneath
301
42k
Transcript
PostCSS'5.0 for$Custom$CSS$Preprocessing in#Back#to#Basics
About&me • Masaaki'Morishita • Twi.er:'@morishi.er_ • GitHub:'morishi.er • ΠΧ:'CSS0830 •
αΠόʔΤʔδΣϯτʢ৽ଔ1ʣ • PostCSSΤόϯδΣϦετʢࣗশʣ
Blog
PostCSSͰ࡞ͬͨͷ • CSSfmt:((S)CSSίʔυܗπʔϧ • AtCSS:(΅͕͔͘Μ͕͍͖͑ͨ͞ΐ͏ͷCSSϓϦϓϩηοαʔ • postcss0style0guide:(ελΠϧΨΠυδΣωϨʔλʔ • ଞϓϥάΠϯ7ͭ
PostCSSͱ
PostCSS • Node.jsͷCSS෩ݴޠύʔαʔ • ASTΛૢ࡞͢ΔศརAPIΛఏڙ • ASTͷૢ࡞શͯϓϥάΠϯ͕୲ • PostCSSࣗମCSSϓϦϓϩηοαʔͰͳ͍ •
ϓϥάΠϯͷΤίγεςϜؚΊͯPostCSSͱݺΕΔ
PostCSS'ͱԿ͔ h"ps:/ /speakerdeck.com/jmblog/postcss5tohahe5ka
ࠓ͢͜ͱ
PostCSS'5.0 for$Custom$CSS$Preprocessing
The$Beginning$is$...
rework Plugin'framework'for'CSS'preprocessing
Modular(CSS(preprocessing( with(rework h"p:/ /tjholowaychuk.tumblr.com/post/ 44267035203/modular=css=preprocessing=with= rework
Custom'CSS'preprocessing h"p:/ /nicolasgallagher.com/custom4css4 preprocessing/
rework&(in&2012) • AutoprefixerͱͱreworkͰ࡞ΒΕ͍ͯͨ • ʢAutoprefixerͱPostCSSͷ࡞ऀಉ͡ʣ • ͔࣌͠͠reworkϒϥβϋοΫΛύʔεͰ͖ͳ͔ͬͨ • ʢ͋ͱTJʹAutoprefixerΛdisΒΕͨΓ…ʣ •
ʮΑ͠ɺࣗͰ࡞Ζ͏ʂʯ
PostCSS'ੜ
The$History$of$PostCSS
PostCSSʢʙ'v1ʣ • "PostCSS)is)a)framework)for)CSS)postprocessors" • AutoprefixerͷͨΊʹ࡞ΒΕͨ • ͜ͷࠒCoffeeScriptͰॻ͔Εͯͨ • ࡞ऀRuby͖ͰSass͖
PostCSS'(v2'ʙ'v4) • ϓϥάΠϯ͕େྔʹ࡞ΒΕ͍ͯ͘ • ݴޠ֦ுͷͨΊͷϓϥάΠϯ࡞ΒΕ͍ͯ͘ • cssnext,)AtCSS,)PreCSS • ʮϙετϓϩηεͱ͍͍ͬͨ…ʯ
None
PostCSS'5.0 released'on'August'20,'2015
PostCSS'5.0 • ࠓ·ͰͰҰ൪େ͖͍มߋ • API໊͕มߋ • Node.js,v0.10ͷαϙʔτ͕ͳ͘ͳΔ • Custom'Syntaxes
Custom'Syntaxes • SyntaxΛࣗͰఆٛ͠ɺPostCSSͷASTʹύʔεͰ͖Δ • ΦϓγϣϯͷՃ • parser:/ύʔαʔΛબ • stringifier:/ΞτϓοτͷॲཧΛબ •
syntax:/parser/+/stringifier postcss().process(source, { syntax: scss })
Custom'Syntaxes • postcss'scss • SCSS༻ͷPostCSS+Syntax • PostCSSͰSCSSϑΝΠϧΛCSSʹίϯύΠϧͰ͖ΔΑ͏ʹ ͳͬͨΘ͚Ͱͳ͍ • SCSS+to+CSSͷίϯύΠϥʢϓϥάΠϯύοΫʣΛ࡞ͬͯΔਓ
͕͍ΔΒ͍͠
Custom'Syntaxes • for%CSS(in(JS • JSΦϒδΣΫτΛPostCSS%ASTʹม • React%Style%Autoprefixer • Styling
PostCSS'is'Awesome!!
※͔͜͜ΒݸਓͷײͰ͢
CSSͷಠࣗه๏Λ࡞ͬͯํͳ͍ ݁ہͲΕͨͩͷγϯλοΫεγϡΨʔ
@function halfSize($value) { @return $value / 2; } $val: 100px;
:root { // Main theme color --color: red; } .foo { width: halfSize($val); } .bar { color: var(--color); padding: $val / 10; }
(")
CSS๊͕͑ΔԿ͔
நԽͱ࠶ར༻ʁ ΧεέʔσΟϯάͱηϨΫλʔৄࡉʁ
ϓϦϓϩηοαʔͲ͏͋Δ͖͔
ಓ۩ʹৼΓճ͞Εͣɺຊ࣭ΛݟΔ
Back%to%Basics
Thanks':D @morishi(er_