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
Introduction to PostCSS
Search
Masaaki Morishita
May 08, 2015
Programming
6
1.6k
Introduction to PostCSS
at CodeGrid 3rd anniversary party
Masaaki Morishita
May 08, 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 5.0: for Custom CSS Preprocessing
morishitter
10
1k
PostCSS for beginners
morishitter
6
1.3k
CSSfmt
morishitter
2
190
Introduction to CSS Architecture
morishitter
3
320
Yet Another CSS Preprocessor
morishitter
1
5.5k
Other Decks in Programming
See All in Programming
CSC307 Lecture 10
javiergs
PRO
0
310
3 Effective Rules for Success with Signals in Angular
manfredsteyer
PRO
0
120
Modern Angular: Renovation for Your Applications
manfredsteyer
PRO
0
140
Namespace on read
tagomoris
2
370
実用的かつリーズナブルな 「Azure × Gemini × LINE」~キャラクターBot 実装ライブデモ~
tomodo_ysys
1
170
【Go言語】ジェネリクス
tomo1227
0
170
DynamoDB コスト最適化っぽいことの基本 with Terraform
kuro_kurorrr
2
250
Architectures with Lightweight Stores: New Rules and Options
manfredsteyer
PRO
0
100
日付と正規化
megmogmog1965
0
140
なぜ宣言的 UI は壊れにくいのか / Why declarative UI is less fragile
uenitty
29
13k
CSC307 Lecture 05
javiergs
PRO
0
210
[After Kotlin Fest 2024 LT Night @ Sansan] もっともっとKotlinを好きになる!K2 Compiler Pluginで遊んでみよう!
kitakkun
2
260
Featured
See All Featured
Designing the Hi-DPI Web
ddemaree
276
34k
Why Our Code Smells
bkeepers
PRO
332
56k
Faster Mobile Websites
deanohume
303
30k
Optimising Largest Contentful Paint
csswizardry
18
2.6k
[RailsConf 2023] Rails as a piece of cake
palkan
35
4.4k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
277
13k
Fashionably flexible responsive web design (full day workshop)
malarkey
399
65k
Debugging Ruby Performance
tmm1
71
11k
Creatively Recalculating Your Daily Design Routine
revolveconf
214
11k
Testing 201, or: Great Expectations
jmmastey
33
6.9k
Raft: Consensus for Rubyists
vanstee
134
6.5k
Music & Morning Musume
bryan
43
5.9k
Transcript
Introduction to PostCSS @morishitter_
CodeGrid 3प ͓ΊͰͱ͏͍͟͝·͢ʂʂ
About me • Masaaki Morishita • twitter: @morishitter_ • github:
morishitter • blog: http://morishitter.hatenablog.com • αΠόʔΤʔδΣϯτ ৽ଔ1
What is PostCSS
PostCSS • https://github.com/postcss/postcs • Node.js • CSS Parser + API
• Plugin Architecture
PostCSS Parser Plugin Plugin Stringifier CSS New CSS
The Beginning is ..
Rework “Modular CSS Preprocessing with Rework” ― TJ Holowaychuk http://tjholowaychuk.tumblr.com/post/44267035203/modular-css-preprocessing-with-rework
“Custom CSS Preprocessing” ― Nicolas Gallagher http://nicolasgallagher.com/custom-css-preprocessing/
Rework PostCSS • First • Simple • Fast • Smarter
Parser • Useful API • Source Maps
PostCSS is Fast http://ai.github.io/about-postcss/en/?full#40
PostCSS is Fast
Smarter Parser • τʔΫϯͷલޙͷۭനվߦ • ϊʔυΛࢀর • ඌͷϓϩύςΟએݴͷηϛίϩϯͷ༗ແ • etc..
Useful API
How to use PostCSS
Usage var postcss = require(‘postcss’) postcss([plugin_1,ɹplugin_2]) .process(css) .then(function (result) {
console.log(result) })
Usage in gulp .pipe(postcss([ require(‘postcss-nested'), require('postcss-simple-vars'), require('postcss-mixins'), require('postcss-easings'), require('cssnext') ]))
Create Plugins var postcss = require('postcss'); module.exports = postcss.plugin('PLUGIN_NAME', function
(opts) { opts = opts || {}; // Work with options here return function (css) { // Transform CSS AST here }; }); Use postcss-plugin-boilerplate
The Extensible Web Write PostCSS plugins Popularity Specification
The Difference between Existing Preprocessors
Difference Existing Preprocessor (like Sass) PostCSS ɾMonolithic ɾCode inside CSS
template ɾTuring Complete ɾModular ɾMaintainable ɾAll features by plugins ɾJS transforms CSS
The Tools Built with PostCSS
a { display: flex; } Autoprefixer a { display: -webkit-box;
display: -webkit-flex; display: -ms-flexbox; display: flex } Add vendor prefixes to rules by Can I Use
cssnext @custom-selector --heading h1, h2, h3, h4, h5, h6; .post-article
--heading { margin-top: calc(10 * var(--row)); color: color( var(--mainColor) blackness(+20%) ); font-variant-caps: small-caps; } CSS transpiler to use tomorrow's CSS syntax today
Pleeease Simplifies the use of preprocessors and combines them with
best postprocessors.
AtCSS .base { /* * @base * @constant */ font-size:
12px; padding: 8px 16px; } .class { /* @extend .base */ background-color: #eee; } Annotations based CSS Processor
AtCSS http://morishitter.hatenablog.com/entry/2015/03/16/100122 AtCSS: Annotation based CSS Processor GitHub https://github.com/morishitter/atcss
PostCSS is downloaded 430,000 per month
PostCSS Users • Twitter • Google • Wordpress • etc…
None
PostCSS is Awesome !!
Thanks :D @morishitter_