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
1.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.6k
Houdini: Abracadabra CSS
morishitter
1
810
Modern CSS: architecture, future specs and build flow
morishitter
13
2.6k
PostCSS and cssnext
morishitter
11
1.8k
PostCSS for beginners
morishitter
6
1.4k
CSSfmt
morishitter
2
210
Introduction to CSS Architecture
morishitter
3
370
Introduction to PostCSS
morishitter
6
1.7k
Yet Another CSS Preprocessor
morishitter
1
5.5k
Other Decks in Programming
See All in Programming
RubyKaigi Hack Space in Tokyo & 函館最速 "予習" 会 / RubyKaigi Hack Space in Tokyo & The Fastest Briefing of RubyKaigi 2026 in Hakodate
moznion
1
110
テスト分析入門/Test Analysis Tutorial
goyoki
10
2.6k
技術的負債と戦略的に戦わざるを得ない場合のオブザーバビリティ活用術 / Leveraging Observability When Strategically Dealing with Technical Debt
yoshiyoshifujii
0
160
Doma で目指す ORM 最適解
nakamura_to
1
160
ドメイン駆動設計とXPで支える子どもの未来 / Domain-Driven Design and XP Supporting Children's Future
nrslib
0
350
TVer iOSチームの共通認識の作り方 - Findy Job LT iOSアプリ開発の裏側 開発組織が向き合う課題とこれから
techtver
PRO
0
640
Use Perl as Better Shell Script
karupanerura
0
580
AIコーディングの本質は“コード“ではなく“構造“だった / The essence of AI coding is not “code” but "structure
seike460
PRO
2
700
Interface vs Types ~型推論が過多推論~
hirokiomote
1
220
推論された型の移植性エラーTS2742に挑む
teamlab
PRO
0
130
primeNumberでのRBS導入の現在 && RBS::Traceでinline RBSを拡充してみた
mnmandahalf
0
230
コードに語らせよう――自己ドキュメント化が内包する楽しさについて / Let the Code Speak
nrslib
5
720
Featured
See All Featured
Embracing the Ebb and Flow
colly
85
4.7k
RailsConf 2023
tenderlove
30
1.1k
Producing Creativity
orderedlist
PRO
345
40k
How STYLIGHT went responsive
nonsquared
100
5.6k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.2k
Visualization
eitanlees
146
16k
Fireside Chat
paigeccino
37
3.5k
Unsuck your backbone
ammeep
671
58k
How to train your dragon (web standard)
notwaldorf
92
6k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
137
34k
Building Adaptive Systems
keathley
41
2.6k
Site-Speed That Sticks
csswizardry
6
580
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_