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

Preprocess All The Things!

Preprocess All The Things!

An introduction to CSS Preprocessors. Talk given at TransformAthens on 10/17/2013.

Further Reading: https://gist.github.com/cdharrison/7023685
Frameworks & Mixin Libraries: https://gist.github.com/cdharrison/7023415
CSS Preprocessor GUIs (Desktop Compilers): https://gist.github.com/cdharrison/7023327

@cdharrison

October 17, 2013
Tweet

More Decks by @cdharrison

Other Decks in Programming

Transcript

  1. @cdharrison Preprocess All the !ings! · #CSSPPATT · TransformAthens ·

    October 17, 2013 PREPROCESS ALL THE THINGS! Chris Harrison Front-End Developer, Morris Media Network An Introduction to CSS Preprocessors
  2. @cdharrison Preprocess All the !ings! · #CSSPPATT · TransformAthens ·

    October 17, 2013 Before CSS Everything had attributes: <font color="#ffe100" size="2" face="Papyrus">ZOMG</font> It was messy. But it was the way things were done.
  3. @cdharrison Preprocess All the !ings! · #CSSPPATT · TransformAthens ·

    October 17, 2013 1996: CSS1 Partially supported in IE3 and Netscape 4. Wasn't 100% implemented until IE5 in 2000.
  4. @cdharrison Preprocess All the !ings! · #CSSPPATT · TransformAthens ·

    October 17, 2013 Instead of writing stuff like this... <font color="#ffe100" size="2" face="Papyrus">ZOMG</font> we started writing stuff like this... <p style="color:#ffe100; font-size:3; font-family: Papyrus">ZOMG</p> or this... <style>p { color:#ffe100; font-size:3; font-family: Papyrus; }</style>
  5. @cdharrison Preprocess All the !ings! · #CSSPPATT · TransformAthens ·

    October 17, 2013 It wasn't perfect. But it (mostly) worked.
  6. @cdharrison Preprocess All the !ings! · #CSSPPATT · TransformAthens ·

    October 17, 2013 No Variables Multiple HTTP Requests Non-Reusable
  7. @cdharrison Preprocess All the !ings! · #CSSPPATT · TransformAthens ·

    October 17, 2013 Why use a preprocessors? Preprocessors compile the CSS code we write in a processed language to the pure CSS syntax we're all used to.
  8. @cdharrison Preprocess All the !ings! · #CSSPPATT · TransformAthens ·

    October 17, 2013 Encourage DRY Syntax Don't Repeat Yourself. Modular CSS = Reusable CSS
  9. @cdharrison Preprocess All the !ings! · #CSSPPATT · TransformAthens ·

    October 17, 2013 Writing CSS like this sucks: header { background: #c00; } header h1.masthead { font-size: 2em; } header h1.masthead a { color: #ffe100; } header h1.masthead a:hover { color: #000; }
  10. @cdharrison Preprocess All the !ings! · #CSSPPATT · TransformAthens ·

    October 17, 2013 Browser Compatibility? Preprocessors don't break browser compatibility. LESS, Sass and Stylus all output valid CSS.
  11. @cdharrison Preprocess All the !ings! · #CSSPPATT · TransformAthens ·

    October 17, 2013 They can speed up development. Frameworks, Mixins, Variables are your BFF
  12. @cdharrison Preprocess All the !ings! · #CSSPPATT · TransformAthens ·

    October 17, 2013 Preprocessors aren't a cure for sucky CSS.
  13. @cdharrison Preprocess All the !ings! · #CSSPPATT · TransformAthens ·

    October 17, 2013 Written in JavaScript, LESS extends CSS with dynamic behaviors like variables, mixins, operations and functions. With less.js, you can embed .less files just like .css files and it compiles on the fly. (Or you can precompile client or server-side.) http://lesscss.org
  14. @cdharrison Preprocess All the !ings! · #CSSPPATT · TransformAthens ·

    October 17, 2013 Written in JavaScript (node.js), comes with many of the features of LESS and Sass. It supports both indented syntax and regular CSS style. http://learnboost.github.io/stylus
  15. @cdharrison Preprocess All the !ings! · #CSSPPATT · TransformAthens ·

    October 17, 2013 Written in Ruby, Sass also extends CSS by adding nested rules, variables, mixins, functions, and much more. Sass has two syntaxes: SCSS, which stands for “Sassy CSS”, and the older syntax simply known as “Sass”. http://sass-lang.com
  16. @cdharrison Preprocess All the !ings! · #CSSPPATT · TransformAthens ·

    October 17, 2013 And there are more... http://hrrsn.me/RzuV
  17. @cdharrison Preprocess All the !ings! · #CSSPPATT · TransformAthens ·

    October 17, 2013 You can compile via Command Line...
  18. @cdharrison Preprocess All the !ings! · #CSSPPATT · TransformAthens ·

    October 17, 2013 An app? For reals? You don't have to compile Ruby, install Sass, Node.js or any other prerequisites before writing any LESS or Sass.
  19. @cdharrison Preprocess All the !ings! · #CSSPPATT · TransformAthens ·

    October 17, 2013 http://incident57.com/codekit/ http://incident57.com/codekit/ Mac · $28* · Sass + Compass & Bourbon, LESS, HAML, Stylus, Jade, CoffeeScript & More
  20. @cdharrison Preprocess All the !ings! · #CSSPPATT · TransformAthens ·

    October 17, 2013 http://compass.kkbox.com PC/Linux/Mac · $10 · Sass/Compass
  21. @cdharrison Preprocess All the !ings! · #CSSPPATT · TransformAthens ·

    October 17, 2013 http://alphapixels.com/prepros/ PC/Mac · Free/$24 Pro Version · Sass, LESS, CoffeeScript, HAML, Jade & More Prepros
  22. @cdharrison Preprocess All the !ings! · #CSSPPATT · TransformAthens ·

    October 17, 2013 http://koala-app.com PC/Linux/Mac · Free · Sass + Compass, LESS, CoffeeScript Koala
  23. @cdharrison Preprocess All the !ings! · #CSSPPATT · TransformAthens ·

    October 17, 2013 More CSS Preprocessor GUIs http://hrrsn.me/S07A
  24. @cdharrison Preprocess All the !ings! · #CSSPPATT · TransformAthens ·

    October 17, 2013 Variables Variables are a way to store information that you can reuse throughout your stylesheet. Use them to store things like colors, font stacks, or any CSS value you think you'll want to reuse.
  25. @cdharrison Preprocess All the !ings! · #CSSPPATT · TransformAthens ·

    October 17, 2013 Nesting HTML has a fairly clear nested, visual hierarchy. CSS doesn't. Sass & LESS will let you nest your CSS selectors in a way that follows the same visual hierarchy of your HTML.
  26. @cdharrison Preprocess All the !ings! · #CSSPPATT · TransformAthens ·

    October 17, 2013 @import In CSS, @import lets you split your CSS into smaller, more maintainable portions but this creates additional HTTP requests. Sass & LESS take the file that you want to import and combine it with the file you're importing into so you can serve a single CSS file to the web browser.
  27. @cdharrison Preprocess All the !ings! · #CSSPPATT · TransformAthens ·

    October 17, 2013 And here's the part where I stop talking about LESS.
  28. @cdharrison Preprocess All the !ings! · #CSSPPATT · TransformAthens ·

    October 17, 2013 Sass Partials !ese are files that contain little snippets of CSS that you can include in other Sass files. @import "_partial.scss";
  29. @cdharrison Preprocess All the !ings! · #CSSPPATT · TransformAthens ·

    October 17, 2013 & (Referencing Parent Selector) a { color: red; &:hover{ background: red; } }
  30. @cdharrison Preprocess All the !ings! · #CSSPPATT · TransformAthens ·

    October 17, 2013 /* Comments */ // Document the crap out of everything. /* Displays when compiled */ // Doesn't display when compiled.
  31. @cdharrison Preprocess All the !ings! · #CSSPPATT · TransformAthens ·

    October 17, 2013 Nested Media Queries Keep media queries within the context of original selectors.
  32. @cdharrison Preprocess All the !ings! · #CSSPPATT · TransformAthens ·

    October 17, 2013 Mixins Reusable sets of properties or rules that you can include or mix into other rules. Define via @mixin mixin-name; and then use @include mixin-name; with a selector. @mixin mixin-name{}; @include mixin-name;
  33. @cdharrison Preprocess All the !ings! · #CSSPPATT · TransformAthens ·

    October 17, 2013 Operators Sass has a handful of standard math operators like +, -, *, /, and %. article { width: 600px / 960px * 100%; }
  34. @cdharrison Preprocess All the !ings! · #CSSPPATT · TransformAthens ·

    October 17, 2013 %foo & @extend Placeholder selectors look just like class or id's but they're used with @extend. Used on their own, they aren't compiled into your CSS.
  35. @cdharrison Preprocess All the !ings! · #CSSPPATT · TransformAthens ·

    October 17, 2013 And did I mention... Frameworks & Mixin Libraries? Bootstrap, Foundation, Compass, Bourbon & More... http://hrrsn.me/RzyE
  36. @cdharrison Preprocess All the !ings! · #CSSPPATT · TransformAthens ·

    October 17, 2013 Further Reading http://hrrsn.me/Rzwm
  37. @cdharrison Preprocess All the !ings! · #CSSPPATT · TransformAthens ·

    October 17, 2013 Any Questions? [email protected] http://speakerdeck.com/cd @cdharrison