Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Introduction to PostCSS
Masaaki Morishita
May 08, 2015
Programming
6
1.5k
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.2k
Houdini: Abracadabra CSS
morishitter
1
580
Modern CSS: architecture, future specs and build flow
morishitter
13
2.1k
PostCSS and cssnext
morishitter
11
1.4k
PostCSS 5.0: for Custom CSS Preprocessing
morishitter
10
840
PostCSS for beginners
morishitter
6
1.1k
CSSfmt
morishitter
2
160
Introduction to CSS Architecture
morishitter
3
290
Yet Another CSS Preprocessor
morishitter
1
5.4k
Other Decks in Programming
See All in Programming
Introduction to Property-Based Testing @ COSCUP 2022
cybai
1
150
アジャイルで始める データ分析基盤構築
nagano
1
920
Git Rebase
bkuhlmann
7
1.1k
閱讀原始碼 - 再戰十年的 jQuery
eddie
1
310
10歳の minne から、これから長く続くプロダクトを作るすべての人へ
tsumichan
9
3.7k
プロダクトの成長とSREと
takuyatezuka
0
120
atama plusの開発チームはどのように「不確実性」に向き合ってきたか〜2022夏版〜
atamaplus
3
640
FullStack eXchange, July 2022
brucel
0
200
Rust on Lambda 大きめCSV生成
atsuyokota
1
400
How to Test Your Compose UI (Droidcon Berlin 2022)
stewemetal
1
130
Isar勉強会
hoddy3190
0
530
企業内スモールデータでのデータ解析
hamage9
0
900
Featured
See All Featured
Facilitating Awesome Meetings
lara
29
4.1k
In The Pink: A Labor of Love
frogandcode
131
21k
Web development in the modern age
philhawksworth
197
9.3k
Done Done
chrislema
174
14k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
37
3.3k
Art, The Web, and Tiny UX
lynnandtonic
280
18k
What's new in Ruby 2.0
geeforr
335
30k
Bash Introduction
62gerente
598
210k
Streamline your AJAX requests with AmplifyJS and jQuery
dougneiner
127
8.5k
How to name files
jennybc
40
63k
Automating Front-end Workflow
addyosmani
1351
200k
Art Directing for the Web. Five minutes with CSS Template Areas
malarkey
196
9.5k
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_