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.7k
Houdini: Abracadabra CSS
morishitter
1
840
Modern CSS: architecture, future specs and build flow
morishitter
13
2.7k
PostCSS and cssnext
morishitter
11
1.8k
PostCSS for beginners
morishitter
6
1.5k
CSSfmt
morishitter
2
220
Introduction to CSS Architecture
morishitter
3
380
Introduction to PostCSS
morishitter
6
1.7k
Yet Another CSS Preprocessor
morishitter
1
5.5k
Other Decks in Programming
See All in Programming
AI Coding Meetup #3 - 導入セッション / ai-coding-meetup-3
izumin5210
0
3.3k
20251016_Rails News ~Rails 8.1の足音を聴く~
morimorihoge
1
190
非同期jobをtransaction内で 呼ぶなよ!絶対に呼ぶなよ!
alstrocrack
0
900
詳しくない分野でのVibe Codingで困ったことと学び/vibe-coding-in-unfamiliar-area
shibayu36
3
4.9k
CSC305 Lecture 03
javiergs
PRO
0
240
NixOS + Kubernetesで構築する自宅サーバーのすべて
ichi_h3
0
760
Software Architecture
hschwentner
6
2.3k
Android16 Migration Stories ~Building a Pattern for Android OS upgrades~
reoandroider
0
110
ALL CODE BASE ARE BELONG TO STUDY
uzulla
18
3.5k
Pull-Requestの内容を1クリックで動作確認可能にするワークフロー
natmark
2
510
明日から始めるリファクタリング
ryounasso
0
140
overlayPreferenceValue で実現する ピュア SwiftUI な AdMob ネイティブ広告
uhucream
0
180
Featured
See All Featured
Designing for Performance
lara
610
69k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
980
How to train your dragon (web standard)
notwaldorf
96
6.3k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.6k
Making the Leap to Tech Lead
cromwellryan
135
9.6k
Balancing Empowerment & Direction
lara
4
690
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
53k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
4 Signs Your Business is Dying
shpigford
185
22k
Thoughts on Productivity
jonyablonski
70
4.9k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
900
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.1k
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_