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

AWDG: Preprocess All the Things!

@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/

@cdharrison

February 06, 2014
Tweet

More Decks by @cdharrison

Other Decks in Programming

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. 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.
  4. 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.)
  5. 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 ; }
  6. 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.
  7. But CSS is far from perfect. No variables Multiple HTTP

    Requests Non-Reusable PITA Browser Prefixes
  8. 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.
  9. Why use a CSS Preprocessor? Frameworks, Variables, Mixins Modular, Reusable,

    Extendable CSS DRY Syntax (Don't Repeat Yourself) And...
  10. 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
  11. 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
  12. 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 >
  13. 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
  14. 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/
  15. 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
  16. Codekit Process Less, Sass, Stylus, Jade, Haml, Slim, CoffeeScript, Javascript

    and Compass files automatically each time you save. incident57.com/codekit/
  17. 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
  18. 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
  19. Prepros Prepros compiles LESS, Sass, SCSS, Stylus, Jade, Slim, Coffeescript,

    LiveScript, Haml and Markdown. alphapixels.com/prepros/
  20. 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.
  21. 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
  22. 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
  23. 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.
  24. 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
  25. 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.
  26. 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 ) ; }
  27. 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 ) ; }
  28. 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 )
  29. @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
  30. 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.
  31. / / 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.
  32. 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.
  33. 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 ; }
  34. 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 ; } }
  35. & The allows you to refer back to a parent

    when constructing a nested selector.
  36. 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 ; }
  37. 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 )
  38. $ 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
  39. 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 ; } }
  40. 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 ; } } }
  41. 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
  42. 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 ; }
  43. %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.
  44. % 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 ; }
  45. / / 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