postcss - process css in a modular way
TRANSCRIPT
![Page 1: PostCSS - process CSS in a modular way](https://reader031.vdocuments.site/reader031/viewer/2022021921/58f9b347760da3da068bd46e/html5/thumbnails/1.jpg)
FrontendUnited Conference | PostCSS Ghent 2016-06-27
PostCSS
http://postcss.org/
![Page 2: PostCSS - process CSS in a modular way](https://reader031.vdocuments.site/reader031/viewer/2022021921/58f9b347760da3da068bd46e/html5/thumbnails/2.jpg)
FrontendUnited Conference | PostCSS Ghent 2016-06-27
There’s a new library every minute (second)
https://www.flickr.com/photos/ksayer/
![Page 3: PostCSS - process CSS in a modular way](https://reader031.vdocuments.site/reader031/viewer/2022021921/58f9b347760da3da068bd46e/html5/thumbnails/3.jpg)
FrontendUnited Conference | PostCSS Ghent 2016-06-27
PostCSS WHY?
● Fast ● Well adopted ● Modular - Just what you need ● Easy transition from SASS or …. ● Easy to extend ● The future NOW
![Page 4: PostCSS - process CSS in a modular way](https://reader031.vdocuments.site/reader031/viewer/2022021921/58f9b347760da3da068bd46e/html5/thumbnails/4.jpg)
FrontendUnited Conference | PostCSS Ghent 2016-06-27
FAST
https://www.flickr.com/photos/sponselli/
![Page 5: PostCSS - process CSS in a modular way](https://reader031.vdocuments.site/reader031/viewer/2022021921/58f9b347760da3da068bd46e/html5/thumbnails/5.jpg)
FrontendUnited Conference | PostCSS Ghent 2016-06-27
It’s fast
https://github.com/postcss/benchmark
![Page 6: PostCSS - process CSS in a modular way](https://reader031.vdocuments.site/reader031/viewer/2022021921/58f9b347760da3da068bd46e/html5/thumbnails/6.jpg)
FrontendUnited Conference | PostCSS Ghent 2016-06-27
Well adopted
https://www.flickr.com/photos/robertdouglass/
![Page 7: PostCSS - process CSS in a modular way](https://reader031.vdocuments.site/reader031/viewer/2022021921/58f9b347760da3da068bd46e/html5/thumbnails/7.jpg)
FrontendUnited Conference | PostCSS Ghent 2016-06-27
Well adopted
http://npm-stat.com/charts.html?package=postcss
![Page 8: PostCSS - process CSS in a modular way](https://reader031.vdocuments.site/reader031/viewer/2022021921/58f9b347760da3da068bd46e/html5/thumbnails/8.jpg)
FrontendUnited Conference | PostCSS Ghent 2016-06-27
autoprefixer
●So you are probably already using PostCSS without knowing it.
![Page 9: PostCSS - process CSS in a modular way](https://reader031.vdocuments.site/reader031/viewer/2022021921/58f9b347760da3da068bd46e/html5/thumbnails/9.jpg)
FrontendUnited Conference | PostCSS Ghent 2016-06-27
How does it work?
![Page 10: PostCSS - process CSS in a modular way](https://reader031.vdocuments.site/reader031/viewer/2022021921/58f9b347760da3da068bd46e/html5/thumbnails/10.jpg)
FrontendUnited Conference | PostCSS Ghent 2016-06-27
Execution
![Page 11: PostCSS - process CSS in a modular way](https://reader031.vdocuments.site/reader031/viewer/2022021921/58f9b347760da3da068bd46e/html5/thumbnails/11.jpg)
FrontendUnited Conference | PostCSS Ghent 2016-06-27
Execution
var postCSS = require('postcss');
var inputCSS = '.myClass { color: red}' //your CSS
var plugins = [ A, B, C, D, E, F, G, H];
postCSS(plugins)
.process(inputCSS)
.then(doStuff)
![Page 12: PostCSS - process CSS in a modular way](https://reader031.vdocuments.site/reader031/viewer/2022021921/58f9b347760da3da068bd46e/html5/thumbnails/12.jpg)
FrontendUnited Conference | PostCSS Ghent 2016-06-27
Examples
https://www.flickr.com/photos/debord/
![Page 13: PostCSS - process CSS in a modular way](https://reader031.vdocuments.site/reader031/viewer/2022021921/58f9b347760da3da068bd46e/html5/thumbnails/13.jpg)
FrontendUnited Conference | PostCSS Ghent 2016-06-27
PostCSS-Nested
![Page 14: PostCSS - process CSS in a modular way](https://reader031.vdocuments.site/reader031/viewer/2022021921/58f9b347760da3da068bd46e/html5/thumbnails/14.jpg)
FrontendUnited Conference | PostCSS Ghent 2016-06-27
CSS MQPacker
![Page 15: PostCSS - process CSS in a modular way](https://reader031.vdocuments.site/reader031/viewer/2022021921/58f9b347760da3da068bd46e/html5/thumbnails/15.jpg)
FrontendUnited Conference | PostCSS Ghent 2016-06-27
CSSNano
![Page 16: PostCSS - process CSS in a modular way](https://reader031.vdocuments.site/reader031/viewer/2022021921/58f9b347760da3da068bd46e/html5/thumbnails/16.jpg)
FrontendUnited Conference | PostCSS Ghent 2016-06-27
Easy transition
![Page 17: PostCSS - process CSS in a modular way](https://reader031.vdocuments.site/reader031/viewer/2022021921/58f9b347760da3da068bd46e/html5/thumbnails/17.jpg)
FrontendUnited Conference | PostCSS Ghent 2016-06-27
From SCSS to PostCSS
●https://github.com/postcss/postcss-import
●https://github.com/postcss/postcss-simple-vars
●https://github.com/postcss/postcss-nested
●https://github.com/postcss/postcss-mixins
● You said goodbye to compass a while ago, right?
![Page 18: PostCSS - process CSS in a modular way](https://reader031.vdocuments.site/reader031/viewer/2022021921/58f9b347760da3da068bd46e/html5/thumbnails/18.jpg)
FrontendUnited Conference | PostCSS Ghent 2016-06-27
Easy to extend
https://www.flickr.com/photos/-imax-/
![Page 19: PostCSS - process CSS in a modular way](https://reader031.vdocuments.site/reader031/viewer/2022021921/58f9b347760da3da068bd46e/html5/thumbnails/19.jpg)
FrontendUnited Conference | PostCSS Ghent 2016-06-27
It’s just JavaScript
https://github.com/postcss/postcss-mixins
![Page 20: PostCSS - process CSS in a modular way](https://reader031.vdocuments.site/reader031/viewer/2022021921/58f9b347760da3da068bd46e/html5/thumbnails/20.jpg)
FrontendUnited Conference | PostCSS Ghent 2016-06-27
Extend - new plugin
https://github.com/postcss/postcss-plugin-boilerplate
![Page 21: PostCSS - process CSS in a modular way](https://reader031.vdocuments.site/reader031/viewer/2022021921/58f9b347760da3da068bd46e/html5/thumbnails/21.jpg)
FrontendUnited Conference | PostCSS Ghent 2016-06-27
Example: postcss-focus
https://github.com/postcss/postcss-focus
![Page 22: PostCSS - process CSS in a modular way](https://reader031.vdocuments.site/reader031/viewer/2022021921/58f9b347760da3da068bd46e/html5/thumbnails/22.jpg)
FrontendUnited Conference | PostCSS Ghent 2016-06-27
Here be dragonsNothing is stopping you to produce spaghetti.
https://www.flickr.com/photos/jeremyiah/
![Page 23: PostCSS - process CSS in a modular way](https://reader031.vdocuments.site/reader031/viewer/2022021921/58f9b347760da3da068bd46e/html5/thumbnails/23.jpg)
FrontendUnited Conference | PostCSS Ghent 2016-06-27
handle with care
![Page 24: PostCSS - process CSS in a modular way](https://reader031.vdocuments.site/reader031/viewer/2022021921/58f9b347760da3da068bd46e/html5/thumbnails/24.jpg)
FrontendUnited Conference | PostCSS Ghent 2016-06-27
The future - now!
![Page 25: PostCSS - process CSS in a modular way](https://reader031.vdocuments.site/reader031/viewer/2022021921/58f9b347760da3da068bd46e/html5/thumbnails/25.jpg)
FrontendUnited Conference | PostCSS Ghent 2016-06-27
CSSnext
![Page 26: PostCSS - process CSS in a modular way](https://reader031.vdocuments.site/reader031/viewer/2022021921/58f9b347760da3da068bd46e/html5/thumbnails/26.jpg)
FrontendUnited Conference | PostCSS Ghent 2016-06-27
CSSnext
http://cssnext.io/features/#custom-properties-var
![Page 27: PostCSS - process CSS in a modular way](https://reader031.vdocuments.site/reader031/viewer/2022021921/58f9b347760da3da068bd46e/html5/thumbnails/27.jpg)
FrontendUnited Conference | PostCSS Ghent 2016-06-27
CSS is not a programming language
It really isn’t, however:
calc()
color()
var()
conditionals? :not, :matches
![Page 28: PostCSS - process CSS in a modular way](https://reader031.vdocuments.site/reader031/viewer/2022021921/58f9b347760da3da068bd46e/html5/thumbnails/28.jpg)
FrontendUnited Conference | PostCSS Ghent 2016-06-27
LINKS
https://www.smashingmagazine.com/2015/12/introduction-to-postcss/ https://github.com/postcss/postcss https://github.com/postcss/postcss/blob/master/docs/plugins.md http://postcss.parts/ https://github.com/wunderkraut/gulp-task-postcss
![Page 29: PostCSS - process CSS in a modular way](https://reader031.vdocuments.site/reader031/viewer/2022021921/58f9b347760da3da068bd46e/html5/thumbnails/29.jpg)
FrontendUnited Conference | PostCSS Ghent 2016-06-27
Andreas Sahle (@pixelmord) @wunderkraut_de
https://wunder.io/de/