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/

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
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
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 >
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
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.
26. Codekit Process Less, Sass, Stylus, Jade, Haml, Slim, CoffeeScript, Javascript and Compass files automatically each time you save. incident57.com/codekit/
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
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
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.