Pro Yearly is on sale from $80 to $50! »

AWDG: Preprocess All the Things!

073bae586e2c2f9cb8ad530668f62394?s=47 @cdharrison
February 06, 2014

AWDG: Preprocess All the Things!

Audience: Atlanta Web Design Group
Location: MailChimp HQ, Atlanta GA
Synopsis: An introductory talk on CSS Preprocessors covering LESS, Stylus & Sass (SCSS).

This was output from Reveal.js and has a few display issues. I'll upload a better version when I can clean the output up. In the meantime, you can view slidedeck here as well: http://cdharrison.com/presentations/awdgcss/

073bae586e2c2f9cb8ad530668f62394?s=128

@cdharrison

February 06, 2014
Tweet

Transcript

  1. PREPROCESS ALL THE THINGS! An Introduction to CSS Preprocessors ·

    Chris Harrison @cdharrison Atlanta Web Design Group · 6 Feb 2014 0
  2. Hi, I'm Chris! Made my first website in 1996 Front-End

    Designer/Developer for Organizer/Founder of Co-Founder/Member of Adobe Influencer Morris RefreshAugusta TheClubhou.se
  3. HASHTAG ALL THE THINGS! #AWDGCSS

  4. None
  5. Before CSS The look of elements was controlled via inline

    attributes: < p > < f o n t c o l o r = " # f f e 1 0 0 " s i z e = " 2 " f a c e = " P a p y r u s " > < b > < b l i n k > 2 L E G I T 2 Q U I T < / b l i n k > < / b > < b r > < i > H E Y H E Y < / i > < / f o n t > < / p > In short: it was painful to author/maintain.
  6. And then CSS happened. And we were able to use

    like this... < p s t y l e = " c o l o r : # f f e 1 0 0 ; f o n t - s i z e : 2 ; f o n t - f a m i l y : P a p y r u s ; " > Z O M G O S H . < / p > (Which wasn't much better than inline attributes.)
  7. Or this... (Via Inline Stylesheets) < s t y l

    e > < / s t y l e > < p > Z O M G ! N o i n l i n e s t y l e s ? ! D O U B L E R A I N B O W ! < / p > p { c o l o r : # f f e 1 0 0 ; f o n t - s i z e : 2 ; f o n t - f a m i l y : P a p y r u s ; }
  8. Or this... Where we finally separated style from content via

    external stylesheets! < s t y l e > < / s t y l e > < p > Z O M G ! N o s t y l e s i n m y H T M L ? ! D O U B L E R A I N B O W ! < / p > @ i m p o r t u r l ( / m y / a w e s o m e / s t y l e s h e e t . c s s ) ; It was magical, trust me.
  9. But CSS is far from perfect. No variables Multiple HTTP

    Requests Non-Reusable PITA Browser Prefixes
  10. Fortunately, there's a better way!

  11. But first, a Disclaimer: CSS Preprocessors won't fix terrible CSS.

  12. What's a CSS Preprocessor? CSS Preprocessors compile the CSS we

    write in a processed language into the pure CSS syntax we're all used to.
  13. Why use a CSS Preprocessor? Frameworks, Variables, Mixins Modular, Reusable,

    Extendable CSS DRY Syntax (Don't Repeat Yourself) And...
  14. If you can write CSS, you can write LESS, Sass,

    or Stylus.
  15. Popularity of CSS Preprocessors Sass 5% Scss 13% LESS 23%

    Stylus 3% I don't like any of them 7% I don't have a preference 2% I've never tried any of them 46% Other 1% [June 2012] CSS Tricks: Popularity of CSS Preprocessors — hrrsn.me/TmDg
  16. None
  17. LESS Written in Javascript, LESS extends CSS with dynamic behaviors

    like variables, mixins, operations, and functions. - couple with l e s s . j s you can embed just like CSS. lesscss.org
  18. Basic LESS Usage < l i n k r e

    l = " s t y l e s h e e t / l e s s " t y p e = " t e x t / c s s " h r e f = " s t y l e s . l e s s " > < s c r i p t s r c = " l e s s . j s " t y p e = " t e x t / j a v a s c r i p t " > < / s c r i p t >
  19. None
  20. Sass Written in Ruby, Sass also extends CSS by adding

    nested rules, variables, mixins, functions, and much more. Two syntaxes: - concise, omits colons and brackets - functions as an extension of CSS syntax sass-lang.com
  21. None
  22. Stylus Expressive, robust, feature-rich CSS language built for nodejs. Supports

    both an indented syntax and regular CSS style. - optionally omit colons, semi-colons, brackets and more learnboost.github.io/stylus/
  23. How can I use a CSS Preprocessor? Compile Locally Client-side

    Compiling Compile and Cache On-Demand (Server-Side) Compile on Deploy Jeff Croft: Many Ways to Use a CSS Preprocessor — hrrsn.me/TmUz
  24. Just starting out? Use a GUI Some of them are

    really, really good.
  25. None
  26. Codekit Process Less, Sass, Stylus, Jade, Haml, Slim, CoffeeScript, Javascript

    and Compass files automatically each time you save. incident57.com/codekit/
  27. None
  28. Compass.app Compass.app is a menubar only app for Sass and

    Compass. It helps designers compile stylesheets easily without resorting to command line interface. compass.kkbox.com
  29. None
  30. Koala Koala is a GUI application for Less, Sass, Compass

    and CoffeeScript compilation, to help web developers to use them more efficiently. koala-app.com
  31. None
  32. Prepros Prepros compiles LESS, Sass, SCSS, Stylus, Jade, Slim, Coffeescript,

    LiveScript, Haml and Markdown. alphapixels.com/prepros/
  33. Syntax The most important part of writing code in a

    CSS preprocessor is understanding the syntax. Luckily for us, the syntax is (or can be) identical to regular CSS for all three preprocessors.
  34. Sass (SCSS) or LESS Sass (SCSS) and LESS both use

    standard CSS syntax. This makes it extremely easy to convert an existing CSS file to either preprocessor. / * s t y l e . s c s s o r s t y l e . l e s s * / h 1 { c o l o r : # 0 0 a f e e ; } / * s t y l e . s a s s * / h 1 c o l o r : # 0 0 a f e e
  35. Stylus Stylus accepts standard CSS syntax + other variations where

    brackets, colons, and semi-colons are all optional. / * s t y l e . s t y l * / d i v . m a s t h e a d { b a c k g r o u n d : # 0 0 a f e e ; } / * o m i t b r a c k e t s * / d i v . m a s t h e a d b a c k g r o u n d : # 0 0 a f e e ; / * o m i t c o l o n s a n d s e m i - c o l o n s * / d i v . m a s t h e a d b a c k g r o u n d # 0 0 a f e e
  36. Variables Variables are a way to store reusable strings that

    you can reference throughout your stylesheet(s). Use them to store things like colors, font stacks, etc.
  37. SCSS $ m a i n - c o l

    o r : # 0 0 6 ; c o l o r : $ m a i n - c o l o r ; LESS @ m a i n - c o l o r : # 0 0 6 ; c o l o r : @ m a i n - c o l o r ; Stylus m a i n - c o l o r = # 0 0 6 c o l o r m a i n - c o l o r
  38. 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.
  39. SCSS Mixins @ m i x i n p a

    d ( $ x , $ y ) { p a d d i n g : $ y $ x ; } . m s g { @ i n c l u d e p a d ( 5 p x , 1 0 p x ) ; }
  40. LESS Mixins . p a d ( @ x ,

    @ y ) { p a d d i n g : @ y @ x ; } . m s g { . p a d ( 5 p x , 1 0 p x ) ; }
  41. Stylus Mixins p a d ( x , y )

    p a d d i n g y x . m s g p a d ( 5 p x , 1 0 p x )
  42. @import Just like CSS, you can import additional stylesheets into

    a main document. With preprocessors, there aren't multiple HTTP request. Compiled CSS = 1 combined stylesheet. @ i m p o r t " f i l e . l e s s " ; / / L E S S @ i m p o r t " f i l e " ; / / A s s u m e s . s a s s o r . s c s s @ i m p o r t " m i x i n s / b o r d e r - r a d i u s " / / A s s u m e s . s t y l @ i m p o r t " s t y l e . c s s " / / S t y l u s - l i t e r a l
  43. And now here's the part where I stop talking about

    LESS & Stylus.
  44. Sass Partials Chunks of CSS that you are included in

    other Sass files. These don't compile directly. Reuse as you see fit. / / f i l e n a m e : _ m e n u . s c s s @ i m p o r t " _ m e n u " ; / / O R : @ i m p o r t " m e n u " ; Underscore (_) is optional with @import. Sass checks for it automatically.
  45. / / F i l e S t r u

    c t u r e + s c s s / c o r e . s c s s / / P r i m a r y S a s s f i l e @ i m p o r t " m i x i n s " ; / / _ m i x i n s . s c s s @ i m p o r t " c o l o r s " ; / / _ c o l o r s . s c s s @ i m p o r t " t y p o g r a p h y " ; / / _ t y p o g r a p h y . s c s s @ i m p o r t " m a s t h e a d " ; / / _ m a s t h e a d . s c s s @ i m p o r t " n a v " ; / / _ n a v . s c s s / / I t ' d c o m p i l e t h e m a l l i n t o o n e C S S f i l e : + c s s / c o r e . c s s Underscore (_) is optional with @import. Sass checks for it automatically.
  46. Nesting HTML has a fairly clear nested, visual hierarchy. CSS

    doesn't. Sass lets you nest your CSS selectors in a way that follows the same logical structure.
  47. Instead of writing repetitive selectors... h 1 { f o

    n t - f a m i l y : P a p y r u s ; f o n t - s i z e : 1 5 p x ; } h 1 a { c o l o r : # f f e 1 0 0 ; }
  48. You can nest child selectors within the parent. h 1

    { f o n t { f a m i l y : P a p y r u s ; s i z e : 1 5 p x ; } a { c o l o r : # f f e 1 0 0 ; } }
  49. & The allows you to refer back to a parent

    when constructing a nested selector.
  50. This: h 1 { f o n t - s

    i z e : 2 4 p x ; & . t a g l i n e { f o n t - s i z e : 4 8 p x ; } } Compiles to this: h 1 { f o n t - s i z e : 2 4 p x ; } h 1 . t a g l i n e { f o n t - s i z e : 4 8 p x ; }
  51. Color Functions lighten(), darken(), rgba(), hsla()

  52. l i g h t e n ( $ c

    o l o r , $ a m o u n t ) d a r k e n ( $ c o l o r , $ a m o u n t ) r g b a ( $ c o l o r , $ o p a c i t y ) h s l a ( $ c o l o r , $ o p a c i t y )
  53. $ a w d g R e d : #

    d e 3 8 3 1 ; a . l o g o { b a c k g r o u n d : $ a w d g R e d ; & : h o v e r { b a c k g r o u n d : d a r k e n ( $ a w d g R e d , 2 5 ) ; } & : a c t i v e { b a c k g r o u n d : r g b a ( $ a w d g R e d , . 7 5 ) ; } } This compiles to: → colors.css
  54. Nested Media Queries Allow you to keep media queries within

    their original context.
  55. Nested Media Query Here, we can change the < h

    1 > font-size based on viewport max-width. h 1 { f o n t - s i z e : 4 e m ; @ m e d i a s c r e e n a n d ( m a x - w i d t h : 4 8 0 p x ) { f o n t - s i z e : 2 e m ; } @ m e d i a s c r e e n a n d ( m a x - w i d t h : 3 2 0 p x ) { c o l o r : # c 0 0 ; f o n t - s i z e : 1 . 5 e m ; } }
  56. But what if you want to change your breakpoints? Conditional

    MQ Mixin @ m i x i n b p ( $ p o i n t ) { @ i f $ p o i n t = = p a p a - b e a r { @ m e d i a ( m a x - w i d t h : 1 6 0 0 p x ) { @ c o n t e n t ; } } @ e l s e i f $ p o i n t = = m a m a - b e a r { @ m e d i a ( m a x - w i d t h : 1 2 5 0 p x ) { @ c o n t e n t ; } } @ e l s e i f $ p o i n t = = b a b y - b e a r { @ m e d i a ( m a x - w i d t h : 6 0 0 p x ) { @ c o n t e n t ; } } }
  57. How you'd use it h 1 { f o n

    t - s i z e : 4 e m ; @ i n c l u d e b p ( m a m a - b e a r ) { f o n t - s i z e : 2 e m ; } @ i n c l u d e b p ( b a b y - b e a r ) { c o l o r : # c 0 0 ; f o n t - s i z e : 1 . 5 e m ; } } CSS Tricks - Conditional Media Query Mixins - hrrsn.me/Tlub
  58. Operators Sass has a handful of standard math operators like

    +, -, *, /, and %.
  59. Sass Operators Here, we can calculate the width of the

    sidebar based on the width and columns. / / S C S S $ w i d t h : 9 6 0 p x ; $ c o l : 6 ; # s i d e b a r { w i d t h : ( $ w i d t h / $ c o l ) ; } / / B E C O M E S # s i d e b a r { w i d t h : 1 6 0 p x ; }
  60. %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.
  61. % c l e a r f i x {

    z o o m : 1 ; & : b e f o r e , & : a f t e r { c o n t e n t : " \ 0 0 2 0 " ; d i s p l a y : b l o c k ; h e i g h t : 0 ; o v e r f l o w : h i d d e n ; } & : a f t e r { c l e a r : b o t h ; } } h e a d e r { @ e x t e n d % c l e a r f i x ; }
  62. / / O r y o u c a n

    e x t e n d o t h e r s e l e c t o r s . e r r o r { b o r d e r : 1 p x # f 0 0 ; b a c k g r o u n d - c o l o r : # f d d ; } . s e r i o u s E r r o r { @ e x t e n d . e r r o r ; b o r d e r - w i d t h : 3 p x ; } placeholder.css
  63. Demo Time

  64. Frameworks & Libraries Bootstrap, Foundation, Compass, Bourbon & More... hrrsn.me/RzyE

  65. Even Moar Reading A collection of links on CSS Preprocessors,

    online tools, and more. hrrsn.me/Rzwm
  66. You got this.

  67. Stay in Touch Web: Email: Twitter: @ cdharrison.com chris@cdharrison.com cdharrison

  68. Thank you.