Learning Sass and Compass

A lunch-and-learn presentation on Sass and Compass and how you can use them to give your website superpowers.

Transcript

1. LEARNING SASS AND COMPASS Or, CSS With Superpowers by Christa Dickson
2. WHAT YOU'RE IN FOR Intro/Definitions Tools/Workflow SASS/Compass Features Specific problems we solved with SASS for Parents.com Try It Yourself!
3. WHAT IS SASS? A CSS pre-compiler Allows you to use helpful programming concepts in your CSS: Variables Functions Includes Full Sass Documentation
4. WHAT IS COMPASS? A framework for SASS Comes with pre-packaged functions & mixins resets color helpers sprites grids CSS3 helpers Full Compass Documentation
5. JUST SO WE'RE CLEAR... SASS is the language Compass is the framework By their powers combined we get CSS
6. WHY SHOULD WE USE IT? It's faster to write than normal CSS Makes nesting simpler, easier to manage Makes implementation of CSS3 features easier/faster Makes maintenance easier down the road Enables us to be smart and reusable with our code Plus, it's neat!
7. ANY DRAWBACKS? Ease of nesting can lead to overly verbose code Style overrides can get tricky to find Sprite generation/management is buggy, especially with our setup New workflows/setup/learning curve
8. TOOLS So what do we need to get SASSy? Text editor Local Compass instance (Ruby)
9. WE USE... jRuby gem install of Compass A homegrown IntelliJ plugin
10. OTHER OPTIONS: , easier to setup, but less configurable Command line install of Ruby and Compass seriously easy Scout Compass.app
11. WORKFLOW: LOCAL DEV ENVIRONMENT 1. Set up a Compass project 2. Set up a folder watch 3. Write SASS code (file.scss) 4. The watch compiles SASS to CSS on save (file.css)
12. WORKFLOW: DEV/TEST Commit the .scss files to dev/test At build time, all .scss files are compiled to .css files
13. IMPORTANT NOTE! You won't ever edit or commit the .css files. EVAR.
15. SASS/COMPASS FEATURES Nesting Variables @imports Mixins Functions Sprites
16. NESTING # n a v b a r { w i d t h : 8 0 % ; h e i g h t : 2 3 p x ; u l { l i s t - s t y l e - t y p e : n o n e ; } l i { f l o a t : l e f t ; a { f o n t - w e i g h t : b o l d ; } } }
17. OUTPUTS TO: # n a v b a r { w i d t h : 8 0 % ; h e i g h t : 2 3 p x ; } # n a v b a r u l { l i s t - s t y l e - t y p e : n o n e ; } # n a v b a r l i { f l o a t : l e f t ; } # n a v b a r l i a { f o n t - w e i g h t : b o l d ; }
18. NESTING 201 PSEUDO CLASSES AND THE ALMIGHTY AMPERSAND a { c o l o r : # c e 4 d d 6 ; & : h o v e r { c o l o r : # f f b 3 f f ; } & : v i s i t e d { c o l o r : # c 4 5 8 c b ; } }
19. OUTPUTS TO: a { c o l o r : # c e 4 d d 6 ; } a : h o v e r { c o l o r : # f f b 3 f f ; } a : v i s i t e d { c o l o r : # c 4 5 8 c b ; }
20. NESTING: THINGS TO NOTE Nesting tags within each other translates to a SPACE (descendant selector). # s i t e C o n t a i n e r { . b l o c k { } } / * O u t p u t s t o . . . * / # s i t e C o n t a i n e r . b l o c k { }
21. NESTING: &:PSEUDO OR &.CLASS Using the ampersand in FRONT removes the space. # s i t e C o n t a i n e r { & . b l o c k { } & : h o v e r { } } / * O u t p u t s t o . . . * / # s i t e C o n t a i n e r . b l o c k { } # s i t e C o n t a i n e r : h o v e r { }
22. NESTING: .CLASS & Using the ampersand BEHIND specifies a parent selector. # s i t e C o n t a i n e r { c o l o r : r e d ; . b l u e & { c o l o r : b l u e ; } } / * O u t p u t s t o . . . * / # s i t e C o n t a i n e r { c o l o r : r e d ; } . b l u e # s i t e C o n t a i n e r { c o l o r : b l u e ; }
23. VARIABLES Variables are used to store/reuse commonly used pieces of information $ g r e e n : # 8 f c 3 5 7 ; # s i t e N a v C o n t a i n e r { b a c k g r o u n d - c o l o r : $ g r e e n ; }
24. VARIABLE MATH You can do addition, subtraction, multiplication and division on variables. $ m a r g i n : 1 6 p x ; . b o r d e r { p a d d i n g : $ m a r g i n / 2 ; m a r g i n : $ m a r g i n + 5 p x ; }
25. VARIABLE OUTPUT/INTERPOLATION This standard output format will work in most cases: But what if you want to use the variable as part of the property name? c o l o r : $ g r e e n ; / * d o e s n ' t w o r k * / b o r d e r - $ d i r e c t i o n : 1 p x s o l i d $ g r e e n ; / * d o e s w o r k * / b o r d e r - { $ d i r e c t i o n } : 1 p x s o l i d $ g r e e n ;
26. @IMPORT - CSS INCLUDES Allows you to include smaller stylesheets inside larger ones. @ i m p o r t " p a r t i a l s / f i l e n a m e "
27. FUN WITH PARTIALS The files you include are called 'partials' Partials usually begin with an underscore, e.g., _base.scss The underscore tells SASS not to compile them to their own stylesheets You can import libraries (like Compass) or your own partials Partials are awesome because they allow to you to split up large files into small pieces and then recombine later @ i m p o r t " p a r t i a l s / f i l e n a m e "
28. IMPORT EXAMPLE / * i n c l u d e t h e C o m p a s s f r a m e w o r k * / @ i m p o r t " c o m p a s s " ; / * i n c l u d e a f i l e i n s i d e y o u r f o l d e r , ' p a r t i a l s / _ c o l o r s . s c s s ' * / @ i m p o r t " p a r t i a l s / c o l o r s " ;
29. MIXINS Mixins are reusable, configurable chunks of CSS. @ i n c l u d e m y - m i x i n ;
30. TWO TYPES OF MIXINS: Pre-built mixins (from Compass) Roll-your-own mixins
31. EXAMPLE: USING A COMPASS MIXIN / * t u r n s a b u l l e t e d l i s t i n t o a h o r i z o n t a l l i s t * / u l . h o r i z o n t a l { @ i n c l u d e h o r i z o n t a l - l i s t ; }
32. SOME USEFUL COMPASS MIXINS/FUNCTIONS
33. HTML RESET Old way: New way: < l i n k h r e f = " / w e b / c s s - m i n / c o m m o n / c s s / h t m l 5 R e s e t . c s s " r e l = " s t y l e s h e e t " > @ i m p o r t " b l u e p r i n t / r e s e t " ;
34. COLOR MANIPULATION $ g r e e n : # 1 2 8 c 7 f ; $ l i g h t - g r e e n : l i g h t e n ( $ g r e e n , 2 0 % ) ; $ d a r k - g r e e n : d a r k e n ( $ g r e e n , 2 0 % ) ;
35. OTHER COLOR METHODS saturate desaturate grayscale invert opacify transparentize rbga
36. BROWSER PREFIX MANAGEMENT Old way: New way: . r o u n d e d - c o r n e r { - w e b k i t - b o r d e r - r a d i u s : 4 p x ; - m o z - b o r d e r - r a d i u s : 4 p x ; - k h t m l - b o r d e r - r a d i u s : 4 p x ; b o r d e r - r a d i u s : 4 p x ; } . r o u n d e d - c o r n e r { @ i n c l u d e b o r d e r - r a d i u s ( 4 p x ) ; }
37. OTHER BROWSER PREFIX HELPERS translate rotate box-sizing linear-gradient radial-gradient column-count opacity transition
38. GRIDS Grids require math. Compass does the math for you! / / g r i d s e t u p $ b l u e p r i n t - g r i d - c o l u m n s : 9 ; $ b l u e p r i n t - g r i d - m a r g i n : 2 0 p x ; $ b l u e p r i n t - g r i d - w i d t h : 9 0 p x ; # s i t e C o n t a i n e r { @ i n c l u d e c o n t a i n e r ; } # m a i n C o l u m n { @ i n c l u d e c o l u m n ( 6 ) ; } # r i g h t C o l u m n { @ i n c l u d e c o l u m n ( 3 ) ; @ i n c l u d e l a s t ; }
39. SPRITES Compass gives you tools to generate sprites automagically. @ i m p o r t " m y - i c o n s / * . p n g " ;
40. SPRITE BASIC STEPS 1. Put individual PNGs in a folder under images 2. Define spacing/orientation 3. Your sprite is generated at compile/build time @ i m p o r t " m y - i c o n s / * . p n g " ; . a c t i o n s { . n e w { @ i n c l u d e m y - i c o n s - s p r i t e ( n e w ) ; } . e d i t { @ i n c l u d e m y - i c o n s - s p r i t e ( e d i t ) ; } }
41. SPRITE BENEFITS You don't have to keep track of where the image is in the sprite... you can call it by name You can get dimensions/position from mixins Code is more human-readable $ w i d t h : m y - i c o n s - s p r i t e - w i d t h ( n e w ) ;
42. SPRITE DRAWBACKS Sprite order is inconsistent (alpha vs. by file size) Unusable for retina versions Assumes sprites will be on your local filesystem (vs. Interwoven) No compression If you update and forget to commit an image file, builds will fail
43. SPRITE VERDICT Good for original generation Not so good for upkeep One option... use Compass to generate original sprite, then take generated CSS moving forward Full Compass sprite documentation
44. MIXINS 201: ROLLING YOUR OWN MIXIN @ m i x i n g r e e n - m e ( ) { b a c k g r o u n d - c o l o r : # 9 f 9 ; b o r d e r : 2 p x s o l i d # 0 9 6 ; } p { @ i n c l u d e g r e e n - m e ; }
45. PASSING ARGUMENTS TO MIXINS You can define arguments to be passed into your mixin to change the output. @ m i x i n g r e e n - m e ( $ b o r d e r - s t y l e : s o l i d ) { b a c k g r o u n d - c o l o r : # 9 f 9 ; b o r d e r : 2 p x $ b o r d e r - s t y l e # 0 9 6 ; } p { @ i n c l u d e g r e e n - m e ( $ b o r d e r - s t y l e : d a s h e d ) ; }
46. USING LOGIC IN MIXINS You can use basic control structures (if/else, for loops) in mixins. @ m i x i n c o l o r - m e ( $ c o l o r : b l u e , $ b o r d e r - s t y l e : s o l i d ) { @ i f $ c o l o r = = b l u e { b a c k g r o u n d - c o l o r : # b 2 d e e d ; b o r d e r : 2 p x $ b o r d e r - s t y l e # 0 0 8 b b 4 ; } @ e l s e i f $ 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 : # 9 f 9 ; b o r d e r : 2 p x $ b o r d e r - s t y l e # 0 9 6 ; } } p { @ i n c l u d e c o l o r - m e ( $ c o l o r : g r e e n , $ b o r d e r - s t y l e : d a s h e d ) ; }
47. WHEN TO USE A MIXIN VS. A PARTIAL In general, mixins should be used for shorter chunks of code Partials should be used when there's larger chunks The more mixins you add, the longer it takes to compile The more partials you have, the more confusing your file structure Balance it out somewhere in the middle.
48. FUNCTIONS Similar to mixins, but they generally use math or logic to return a value (rather than a set of styles). / * C o m p a s s s p a n f u n c t i o n : r e t u r n s a w i d t h i n c o l u m n s * / @ f u n c t i o n s p a n ( $ n ) { @ r e t u r n $ b l u e p r i n t - g r i d - w i d t h * $ n + $ b l u e p r i n t - g r i d - m a r g i n * ( $ n - 1 ) ; } # m a i n C o l u m n { w i d t h : s p a n ( 6 ) ; }
49. UNDERSTANDING MIXINS VS. FUNCTIONS Mixins usually output CSS rules Functions usually output a property value or other piece of a CSS rule / * t h i s i s t h e c o l u m n m i x i n ( d o e s f l o a t i n g , m a r g i n a n d w i d t h ) * / # m a i n C o l u m n { @ i n c l u d e c o l u m n ( 6 ) ; } / * t h i s i s t h e s p a n f u n c t i o n ( j u s t r e t u r n s w i d t h ) * / # m a i n C o l u m n { w i d t h : s p a n ( 6 ) ; }
50. SPECIFIC PROBLEMS WE SOLVED WITH SASS FOR PARENTS.COM Browser prefix management enabled us to use cool CSS3 features with more confidence Grid layout for responsive design Creating responsive & non-responsive versions of stylesheets Reducing upkeep on image.css and secureimage.css Built a reusable style library using mixins
51. CREATING RESPONSIVE & NON-RESPONSIVE VERSIONS OF STYLESHEETS We used imports of partials with media queries.
52. / / - - - - c o r e - r e s p o n s i v e . s c s s - - - / * m o b i l e l a y o u t * / @ m e d i a s c r e e n a n d ( m a x - w i d t h : 6 5 3 p x ) { @ i m p o r t " p a r t i a l s / n a r r o w / c o r e " ; } / * t a b l e t p o r t r a i t * / @ m e d i a s c r e e n a n d ( m i n - w i d t h : 6 5 4 p x ) { @ i m p o r t " p a r t i a l s / n o r m a l / c o r e " ; } / * W i d e s c r e e n l a y o u t * / @ m e d i a s c r e e n a n d ( m i n - w i d t h : 9 9 0 p x ) { @ i m p o r t " p a r t i a l s / w i d e / c o r e " ; } / / - - - - c o r e . s c s s - - - @ i m p o r t " p a r t i a l s / n a r r o w / c o r e " ; @ i m p o r t " p a r t i a l s / n o r m a l / c o r e " ; @ i m p o r t " p a r t i a l s / w i d e / c o r e " ;
53. IDENTICAL IMAGE.CSS AND SECUREIMAGE.CSS Same trick, with additional variables
54. / / - - - - i m a g e . s c s s - - - - $ s e c u r e : f a l s e ; @ i m p o r t " p a r t i a l s / i m a g e " ; / / - - - - s e c u r e i m a g e . s c s s - - - - $ s e c u r e : t r u e ; @ i m p o r t " p a r t i a l s / i m a g e " ; / / - - - - p a r t i a l s / i m a g e . s c s s - - - - $ i m a g e _ p a t h : " h t t p : / / i m a g e s . m e r e d i t h . c o m / p a r e n t s / " ; $ s e c u r e _ i m a g e _ p a t h : " h t t p s : / / s e c u r e . p a r e n t s . c o m / p a r e n t s / " ; @ i f $ s e c u r e { $ i m a g e _ p a t h : $ s e c u r e _ i m a g e _ p a t h ; } # h e a d e r { b a c k g r o u n d : u r l ( " # { $ i m a g e _ p a t h } i m a g e . p n g " ; }
55. EXAMPLE CODE: OUTPUT / * - - - - i m a g e . c s s - - - - * / # h e a d e r { b a c k g r o u n d : u r l ( " h t t p : / / i m a g e s . m e r e d i t h . c o m / i m a g e . p n g " ; } / * - - - - s e c u r e i m a g e . c s s - - - - * / # h e a d e r { b a c k g r o u n d : u r l ( " h t t p s : / / s e c u r e . p a r e n t s . c o m / i m a g e . p n g " ; }
56. BUILT A REUSABLE MIXIN LIBRARY a . m o r e { @ i n c l u d e b l o c k - m o r e - l i n k ; } u l { @ i n c l u d e p i n k - b u l l e t s ; } . b l o g M o d u l e { @ i n c l u d e c o n t e n t - b o x ; } . u p { @ i n c l u d e t r i a n g l e ( $ d i r e c t i o n : u p , $ s i z e : 1 0 p x ) ; }
57. TRY IT YOURSELF! Hands-On Example: Finished Example: http://tinkerbin.com/hBuyfjFQ http://tinkerbin.com/wm5x5V41
58. MORE LINKS Basic SASS Tutorial Index of official Compass tutorials Code smarter CSS with Sass My 'Sass' & 'Compass' tags on Delicious
59. Questions? christa.dickson@meredith.com