Let's talk about CSS

Not quite complete

Not quite consistent

Let's talk about preprocessors

Sass/SCSS

http://sass-lang.com/

LESS

http://lesscss.org/

Stylus

http://learnboost.github.io/stylus/

Introducing: PostCSS

It's an engine

for plugins to transform

into almost anything.

• Save effort
  • Autoprefixer (GitHub)
  • cssnano (GitHub)
• Enforce standards
  • cssnext (GitHub)
  • stylelint (GitHub)
• Have fun
  • Canadian Stylesheets (GitHub)
  • Instagram (GitHub)

Browse plugins at http://postcss.parts/

Demo time.

Let's start here:

https://github.com/awayken/2015sdcodecamp

You'll need NodeJS and npm.

#1.0.0

• Our original project

#1.0.1

• PostCSS:
  https://github.com/postcss/postcss#usage

#1.0.2

• Stylelint
  http://stylelint.io/
• Autoprefixer
  https://github.com/postcss/autoprefixer
• cssnano
  http://cssnano.co/

#1.1.0

• Font Magician:
  https://github.com/jonathantneal/postcss-font-magician
• postcss-import:
  https://github.com/postcss/postcss-import
• cssnext:
  http://cssnext.io/