CSS Preprocessors

An introduction to the basics of CSS Preprocessors. This talk is aimed at folks trying to get a feel for what these tools can do and how they help on real world projects.

This talk primarily touches on SCSS but compares some examples to LESS where applicable.

Transcript

1. CSS Preprocessors Presented by / Michael Trythall @mtrythall for slides & code samples http://git.io/729TEQ
2. Hello I'm Mike Head of UX at Front-end + Design for >15 years Using CSS preprocessors for ~2 years Lincoln Loop
3. Following Along Slides, examples, and more at http://git.io/729TEQ
4. Trying the Examples or http://sassmeister.com/ g e m i n s t a l l s a s s and s a s s f i l e
5. kthx let's go
6. What are CSS Preprocessors? Think CoffeeScript for CSS, sorta kinda
7. Why use a CSS preprocessor?
8. What's out there? and are the big dogs Sass LESS
9. What's the Difference?
10. Sass/SCSS Ruby-powered Has Used by designers and FE folks Very friendly syntax More features than other preprocessors Ecosystem better for building custom things Docs complete but not pretty Compass
11. LESS JavaScript-powered Has Used by lots of people, but mostly Bootstrap users Stranger syntax than Sass/SCSS Fewer, but enough, features Ecosystem better for building Bootstrappy things Docs complete (enough) and very pretty Bootstrap
12. Alright, what can they do?
13. Nesting h e a d e r { f o n t - s i z e : 5 e m ; . t i t l e { / / h e a d e r . t i t l e { f o n t - s i z e : 1 0 e m ; } f o n t - s i z e : 1 0 e m ; a { / / h e a d e r . t i t l e a { b a c k g r o u n d : g r e e n ; c o l o r : w h i t e ; } b a c k g r o u n d : g r e e n ; c o l o r : w h i t e ; } } } h e a d e r { f o n t - s i z e : 5 e m ; } h e a d e r . t i t l e { f o n t - s i z e : 1 0 e m ; } h e a d e r . t i t l e a { b a c k g r o u n d : g r e e n ; c o l o r : w h i t e ; }
14. Parent References a { c o l o r : b l u e ; & : h o v e r { / / a : h o v e r c o l o r : y e l l o w ; } } a { n a v & { / / n a v a c o l o r : g r e e n ; } } a { c o l o r : b l u e ; } a : h o v e r { c o l o r : y e l l o w ; } n a v a { c o l o r : g r e e n ; }
15. Imports Non-blocking, single file imports @ i m p o r t " b a s e " ; / * A u t h o r e d D e p e n d e n c i e s * / @ i m p o r t " m i x i n s " ; @ i m p o r t " p a r t i a l s " ; @ i m p o r t " u t i l i t y " ; / / g e n e r a l c l a s s e s u s e d b y e v e r y t h i n g / * P a t t e r n s * / @ i m p o r t " g l o b a l / e l e m e n t s " ; / / c o m m o n e l e m e n t s , h e a d e r , a n c h o r s , t a b l e , e t c @ i m p o r t " g l o b a l / f o r m s " ; @ i m p o r t " g l o b a l / c o m p o n e n t s " ; / / s p e c i a l d e s i g n c o m p o n e n t s , n o n - i n t e r a c t i v e w i d g e t s @ i m p o r t " g l o b a l / w i d g e t s " ; / / a n y c o m p o n e n t w i t h i n t e r a c t i v i t y o r I O / * S t r u c t u r e * / @ i m p o r t " g l o b a l / l a y o u t " ; @ i m p o r t " g l o b a l / h e a d e r " ; @ i m p o r t " g l o b a l / f o o t e r " ; @ i m p o r t " g l o b a l / s i d e - n a v " ;
16. Variables (SASS/Scss) $ f o n t - s i z e : 1 6 p x ; $ t e x t - c o l o r : b l u e ; a { c o l o r : $ t e x t - c o l o r ; / / b l u e } p { $ t e x t - c o l o r : g r e e n ; $ b a c k g r o u n d - c o l o r : b l a c k ; a { b a c k g r o u n d - c o l o r : $ b a c k g r o u n d - c o l o r ; c o l o r : $ t e x t - c o l o r ; / / g r e e n } } h 1 { f o n t - s i z e : $ f o n t - s i z e * 4 ; / / 6 4 p x c o l o r : $ t e x t - c o l o r ; / / g r e e n ! }
17. Variables (SASS/Scss compiled) a { c o l o r : b l u e ; } p a { b a c k g r o u n d - c o l o r : b l a c k ; c o l o r : g r e e n ; } h 1 { f o n t - s i z e : 6 4 p x ; c o l o r : g r e e n ; }
18. Variables (LESS) @ f o n t - s i z e : 1 6 p x ; @ t e x t - c o l o r : b l u e ; a { c o l o r : @ t e x t - c o l o r ; / / b l u e } p { @ t e x t - c o l o r : g r e e n ; @ b a c k g r o u n d - c o l o r : b l a c k ; a { b a c k g r o u n d - c o l o r : @ b a c k g r o u n d - c o l o r ; c o l o r : @ t e x t - c o l o r ; / / g r e e n } } h 1 { f o n t - s i z e : @ f o n t - s i z e * 4 ; / / 6 4 p x c o l o r : @ t e x t - c o l o r ; / / b l u e ! }
19. Variables (LESS, compiled) a { c o l o r : # 0 0 0 0 f f ; } p a { b a c k g r o u n d - c o l o r : # 0 0 0 0 0 0 ; c o l o r : # 0 0 8 0 0 0 ; } h 1 { f o n t - s i z e : 6 4 p x ; c o l o r : # 0 0 0 0 f f ; }
20. Math! p { $ w i d t h : 3 0 e m ; f o n t : 3 0 p x / 2 p x ; / / N o r m a l C S S , n o d i v i s i o n w i d t h : $ w i d t h / 2 ; / / U s i n g a v a r i a b l e c a u s e s d i v i s i o n h e i g h t : ( 5 0 0 p x / 2 ) ; / / U s e s p a r e n t h e s e s , d o e s d i v i s i o n m a r g i n - l e f t : 1 0 p x + 1 0 p x / 5 p x ; / / U s e s + , d o e s d i v i s i o n } p { f o n t : 3 0 p x / 2 p x ; w i d t h : 1 5 e m ; h e i g h t : 2 5 0 p x ; m a r g i n - l e f t : 1 2 p x ; }
21. Built-ins p { c o l o r : l i g h t e n ( g r e e n , 5 % ) ; b a c k g r o u n d - c o l o r : d a r k e n ( y e l l o w , 1 0 % ) ; f o n t - s i z e : c e i l ( 1 2 . 7 8 ) ; l i n e - h e i g h t : f l o o r ( 1 2 . 7 8 ) ; } p { c o l o r : # 0 0 9 a 0 0 ; b a c k g r o u n d - c o l o r : # c c c c 0 0 ; f o n t - s i z e : 1 3 ; l i n e - h e i g h t : 1 2 ; } Plus dozens more
22. Mixins @ m i x i n p a d d i n g ( $ p a r a m : 1 e m ) { / / $ p a r a m h a s a d e f a u l t v a l u e o f 1 e m p a d d i n g : $ p a r a m ; } @ m i x i n b o r d e r ( $ d i r e c t i o n : b o t t o m , $ w e i g h t : 1 p x , $ s t y l e : s o l i d , $ c o l o r : b l a c k ) { b o r d e r - # { $ d i r e c t i o n } : $ w e i g h t $ s t y l e $ c o l o r ; / / S t r i n g i n t e r p o l a t i o n } . b o x 1 { @ i n c l u d e p a d d i n g ; / / p a d d i n g : 1 e m ; b a c k g r o u n d : b l u e ; } . b o x 2 { @ i n c l u d e p a d d i n g ( 5 e m ) ; / / p a d d i n g : 5 e m ; @ i n c l u d e b o r d e r ( l e f t , 1 0 p x , d o t t e d , r e d ) ; / / b o r d e r - l e f t : 1 0 p x d o t t e d r e d ; b a c k g r o u n d : g r e e n ; }
23. Mixin (compiled) . b o x 2 { p a d d i n g : 1 e m ; b a c k g r o u n d : b l u e ; } . b o x 1 { p a d d i n g : 5 e m ; b o r d e r - l e f t : 1 0 p x d o t t e d r e d ; b a c k g r o u n d : g r e e n ; }
24. Functions Not in LESS @ f u n c t i o n a d d - s i z e s ( $ s i z e 1 , $ s i z e 2 ) { @ r e t u r n $ s i z e 1 + $ s i z e 2 } p { f o n t - s i z e : a d d - s i z e s ( 3 e m , 1 0 e m ) ; } p { f o n t - s i z e : 1 3 e m ; }
25. Extends % b i g - t e x t { / / S i l e n t / P l a c e h o l d e r s e l e c t o r ! S A S S / S c s s o n l y f o n t - s i z e : 2 0 e m ; f o n t - w e i g h t : b o l d ; } % d a s h e d - u n d e r l i n e { b o r d e r - b o t t o m : 3 p x d a s h e d ; } . e r r o r { @ e x t e n d % d a s h e d - u n d e r l i n e ; c o l o r : r e d ; } . s e r v e r - e r r o r { @ e x t e n d % b i g - t e x t ; @ e x t e n d . e r r o r ; f o n t - s i z e : 3 0 e m ; }
26. Extends (compiled) . s e r v e r - e r r o r { f o n t - s i z e : 2 0 e m ; f o n t - w e i g h t : b o l d ; } . e r r o r , . s e r v e r - e r r o r { b o r d e r - b o t t o m : 3 p x d a s h e d ; } . e r r o r , . s e r v e r - e r r o r { c o l o r : r e d ; } . s e r v e r - e r r o r { f o n t - s i z e : 3 0 e m ; }
27. Conditions $ s i z e : m e d i u m ; p { @ i f $ s i z e = = x s m a l l { f o n t - s i z e : 8 p x ; } @ e l s e i f $ s i z e = = s m a l l { f o n t - s i z e : 1 0 p x ; } @ e l s e i f $ s i z e = = l a r g e { f o n t - s i z e : 2 4 p x ; } @ e l s e i f $ s i z e = = x l a r g e { f o n t - s i z e : 3 2 p x ; } @ e l s e { f o n t - s i z e : 1 6 p x ; } } p { f o n t - s i z e : 1 6 p x ; }
28. For Loops @ f o r $ i f r o m 1 t h r o u g h 5 { l i . i t e m - # { $ i } { w i d t h : 1 . 5 e m * $ i ; } } l i . i t e m - 1 { w i d t h : 1 . 5 e m ; } l i . i t e m - 2 { w i d t h : 3 e m ; } l i . i t e m - 3 { w i d t h : 4 . 5 e m ; } l i . i t e m - 4 { w i d t h : 6 e m ; } l i . i t e m - 5 { w i d t h : 7 . 5 e m ; }
29. Each Loops @ e a c h $ e m p l o y e e i n P e t e , M i k e , M a r t i n , Y a n n { l i . e m p l o y e e - # { $ e m p l o y e e } { b a c k g r o u n d - i m a g e : u r l ( ' / i m a g e s / p h o t o s / # { $ e m p l o y e e } . j p g ' ) ; } } l i . e m p l o y e e - P e t e { b a c k g r o u n d - i m a g e : u r l ( " / i m a g e s / p h o t o s / P e t e . j p g " ) ; } l i . e m p l o y e e - M i k e { b a c k g r o u n d - i m a g e : u r l ( " / i m a g e s / p h o t o s / M i k e . j p g " ) ; } l i . e m p l o y e e - M a r t i n { b a c k g r o u n d - i m a g e : u r l ( " / i m a g e s / p h o t o s / M a r t i n . j p g " ) ; } l i . e m p l o y e e - Y a n n { b a c k g r o u n d - i m a g e : u r l ( " / i m a g e s / p h o t o s / Y a n n . j p g " ) ; }
30. While Loops $ i : 6 ; @ w h i l e $ i > 0 { . i t e m - # { $ i } { w i d t h : 2 e m * $ i ; } $ i : $ i - 2 ; } . i t e m - 6 { w i d t h : 1 2 e m ; } . i t e m - 4 { w i d t h : 8 e m ; } . i t e m - 2 { w i d t h : 4 e m ; } Shamefully copied from sass-lang.com because I can't think of a realistic use case
31. What about using this stuff in the real world?
32. Best Practices & Pitfalls
33. Killer App of CSS Preprocessors: Configuration Color palette, typography, etc should be configurable.
34. Config Example: Typography $ s a n s - s e r i f : ' O p e n S a n s ' , s a n s - s e r i f ; $ s a n s - s e r i f - c o n d : ' O p e n S a n s C o n d e n s e d ' , s a n s - s e r i f ; $ s e r i f : ' L o r a ' , s e r i f ; $ h e a d e r - f o n t : ' R o b o t o C o n d e n s e d ' , s a n s - s e r i f ; $ b a s e - f o n t - f a m i l y : $ s a n s - s e r i f ; $ b a s e - f o n t - s i z e : 1 6 p x ; $ b a s e - l i n e - h e i g h t : 2 4 p x ; / / T h e f o n t s i z e s f o r h 1 - h 6 . $ h 1 - f o n t - s i z e : 2 . 5 * $ b a s e - f o n t - s i z e ; $ h 2 - f o n t - s i z e : 1 . 5 * $ b a s e - f o n t - s i z e ; $ h 3 - f o n t - s i z e : 1 . 1 7 * $ b a s e - f o n t - s i z e ; $ h 4 - f o n t - s i z e : 1 * $ b a s e - f o n t - s i z e ; $ h 5 - f o n t - s i z e : 0 . 8 3 * $ b a s e - f o n t - s i z e ; $ h 6 - f o n t - s i z e : 0 . 6 7 * $ b a s e - f o n t - s i z e ;
35. Config Example: Color Palette $ w h i t e : # f f f ; $ d a r k e s t - g r a y : # 3 3 3 ; $ d a r k - g r a y : # 4 4 4 ; $ l i g h t - g r a y : # F 2 F 2 F 2 ; $ g r a y : # 6 6 6 ; $ b l a c k : # 1 D 1 D 1 D ; $ b l u e : # 0 0 A E F F ; / / U s e t h a t p a l e t t e ! $ b a c k g r o u n d : $ w h i t e ; $ t e x t - c o l o r : $ b l a c k ; $ h e a d e r - c o l o r : $ d a r k - g r a y ; $ l i n k - c o l o r : $ b l u e ; $ l i n k - c o l o r - h o v e r : d a r k e n ( $ b l u e , 3 % ) ; / / e t c , e t c
36. Use Imports Should look like a table of contents for your styles @ i m p o r t " b a s e " ; / / W h e r e c o n f i g u r a t i o n l i v e s @ i m p o r t " m i x i n s " ; / / G l o b a l m i x i n s @ i m p o r t " p a r t i a l s " ; / / D o e s n ' t g e t c o m p i l e d t o C S S @ i m p o r t " g l o b a l / l a y o u t " ; @ i m p o r t " g l o b a l / h e a d e r / s e a r c h " ; @ i m p o r t " g l o b a l / h e a d e r / n a v i g a t i o n " ; @ i m p o r t " g l o b a l / f o o t e r " ; @ i m p o r t " g l o b a l / s i d e - n a v " ; @ i m p o r t " v i e w s / a r t i c l e s / i n t e r a c t i v e " ; @ i m p o r t " v i e w s / a r t i c l e s / f e a t u r e s " ; @ i m p o r t " v i e w s / a r t i c l e s / p h o t o s " ;
37. Smart Folder Structure
38. Careful with variable flipping Careful with em based layouts and derivative color palettes $ b a s e - c o l o r : b l u e ; / / I f $ b a s e - c o l o r c h a n g e s , t h i s c o u l d b e v e r y a l a r m i n g $ l i n k - c o l o r : d a r k e n ( $ b a s e - c o l o r , 5 % ) ; $ b a s e - f o n t - s i z e : 1 6 p x ; / / I f $ b a s e - f o n t - s i z e c h a n g e s , c o u l d b e * h u g e * , o r t i n y ! $ h 1 - f o n t - s i z e : $ b a s e - f o n t - s i z e * 2 . 5 ;
39. Avoid Deep Nests Don't mimic HTML structure, use minimal selectors . s l i d e s h o w { d i v { h e a d e r { h 3 . t i t l e { a { c o l o r : b l u e ; } } } } }
40. Avoid Deep Nests (compiled) Looks benign, creates specificity nightmares . s l i d e s h o w d i v h e a d e r h 3 . t i t l e a { c o l o r : b l u e ; }
41. Limit and Flatten Classes Use extends and mixins to keep things DRY . a r t i c l e { f o n t - s i z e : 2 0 p x ; c o l o r : b l a c k ; } . f e a t u r e d { f o n t - s i z e : 3 0 p x ; } . f e a t u r e d - s p o n s o r e d { @ e x t e n d . f e a t u r e d ; c o l o r : y e l l o w ; } < s e c t i o n c l a s s = " a r t i c l e f e a t u r e d " > < h 3 > A r t i c l e T i t l e < / h 3 > < / s e c t i o n > < s e c t i o n c l a s s = " a r t i c l e d f e a t u r e d - s p o n s o r e d " > < h 2 > T h i s a r t i c l e i s a * f e a t u r e d * s p o n s o r e d a r t i c l e < / h 2 > < / s e c t i o n >
42. Watch for Bloat % c l e a r f i x { & : b e f o r e , & : a f t e r { c o n t e n t : " " ; d i s p l a y : t a b l e ; } & : a f t e r { c l e a r : b o t h ; } } . a r t i c l e { @ e x t e n d % c l e a r f i x ; p a d d i n g : 1 0 p x ; h 3 { @ e x t e n d % c l e a r f i x ; c o l o r : g r e e n ; . t i t l e { f l o a t : l e f t ; } } } . f e a t u r e d - a r t i c l e { @ e x t e n d . a r t i c l e ; }
43. Watch for Bloat (compiled) Consider nesting strategy, extends, and mixins as you go . a r t i c l e : b e f o r e , . f e a t u r e d - a r t i c l e : b e f o r e , . a r t i c l e h 3 : b e f o r e , . f e a t u r e d - a r t i c l e h 3 : b e f o r e , . a r t i c l e : a f t e r c o n t e n t : " " ; d i s p l a y : t a b l e ; } . a r t i c l e : a f t e r , . f e a t u r e d - a r t i c l e : a f t e r , . a r t i c l e h 3 : a f t e r , . f e a t u r e d - a r t i c l e h 3 : a f t e r { c l e a r : b o t h ; } . a r t i c l e , . f e a t u r e d - a r t i c l e { p a d d i n g : 1 0 p x ; } . a r t i c l e h 3 , . f e a t u r e d - a r t i c l e h 3 { c o l o r : g r e e n ; } . a r t i c l e h 3 . t i t l e , . f e a t u r e d - a r t i c l e h 3 . t i t l e { f l o a t : l e f t ; }
44. On Deployment & Workflow
45. Wrap Up!
46. Questions? Thank you! / Michael Trythall @mtrythall Watch for more examples http://git.io/729TEQ