Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Introduction to PostCSS

Introduction to PostCSS

at CodeGrid 3rd anniversary party

Masaaki Morishita

May 08, 2015
Tweet

More Decks by Masaaki Morishita

Other Decks in Programming

Transcript

  1. About me • Masaaki Morishita • twitter: @morishitter_ • github:

    morishitter • blog: http://morishitter.hatenablog.com • αΠόʔΤʔδΣϯτ ৽ଔ1೥໨
  2. 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/
  3. Rework PostCSS • First • Simple • Fast • Smarter

    Parser • Useful API • Source Maps
  4. 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
  5. Difference Existing Preprocessor (like Sass) PostCSS ɾMonolithic ɾCode inside CSS

    template ɾTuring Complete ɾModular ɾMaintainable
 ɾAll features by plugins ɾJS transforms CSS
  6. 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
  7. 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
  8. AtCSS .base { /* * @base * @constant */ font-size:

    12px; padding: 8px 16px; } .class { /* @extend .base */ background-color: #eee; } Annotations based CSS Processor