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
レガシーシステムの機能調査・開発におけるAI利活用
takuya_ohtonari
0
600
GoのGenericsによるslice操作との付き合い方
syumai
2
610
複数アプリケーションを育てていくための共通化戦略
irof
10
3.9k
ASP.NETアプリケーションのモダナイズ インフラ編
tomokusaba
1
260
Rails産でないDBを Railsに引っ越すHACK - Omotesando.rb #110
lnit
1
160
Gleamという選択肢
comamoca
6
720
List Unfolding - 'unfold' as the Computational Dual of 'fold', and how 'unfold' relates to 'iterate'"
philipschwarz
PRO
0
190
Perlで痩せる
yuukis
1
680
統一感のある Go コードを生成 AI の力で手にいれる
otakakot
0
3k
事業戦略を理解してソフトウェアを設計する
masuda220
PRO
22
6.1k
LINEヤフー データグループ紹介
lycorp_recruit_jp
0
610
AIエージェントによるテストフレームワーク Arbigent
takahirom
0
380
Featured
See All Featured
Product Roadmaps are Hard
iamctodd
PRO
53
11k
The Straight Up "How To Draw Better" Workshop
denniskardys
233
140k
Speed Design
sergeychernyshev
31
990
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.6k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.8k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
480
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.8k
Building Adaptive Systems
keathley
43
2.6k
Git: the NoSQL Database
bkeepers
PRO
430
65k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Testing 201, or: Great Expectations
jmmastey
42
7.5k
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_