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
820
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.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
Spring gRPC で始める gRPC 入門 / Introduction to gRPC with Spring gRPC
mackey0225
2
520
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
1
160
Beyond Portability: Live Migration for Evolving WebAssembly Workloads
chikuwait
0
380
複数アプリケーションを育てていくための共通化戦略
irof
10
4k
[初登壇@jAZUG]アプリ開発者が気になるGoogleCloud/Azure+wasm/wasi
asaringo
0
130
Java on Azure で LangGraph!
kohei3110
0
160
Effect の双対、Coeffect
yukikurage
5
1.4k
生成AIコーディングとの向き合い方、AIと共創するという考え方 / How to deal with generative AI coding and the concept of co-creating with AI
seike460
PRO
1
320
エンジニア向け採用ピッチ資料
inusan
0
140
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
200
型付きアクターモデルがもたらす分散シミュレーションの未来
piyo7
0
800
GoのWebAssembly活用パターン紹介
syumai
3
10k
Featured
See All Featured
GraphQLとの向き合い方2022年版
quramy
46
14k
Speed Design
sergeychernyshev
31
1k
Raft: Consensus for Rubyists
vanstee
140
7k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Statistics for Hackers
jakevdp
799
220k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.8k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.6k
Building a Modern Day E-commerce SEO Strategy
aleyda
41
7.3k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.2k
We Have a Design System, Now What?
morganepeng
52
7.6k
Designing for humans not robots
tammielis
253
25k
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_