Sass and compass workshop

Transcript

1. SASS & COMPASS WORKSHOP Feb. 21, 2014 | Ver. 8 Shaho Toofani Sass and Compass Workshop - ©2014 Shaho Toofani
2. Tools codepen.io SassMeister Grunt/LiveReload Sass and Compass Workshop - ©2014 Shaho Toofani
3. Why you should use Sass and Compass — CSS is crafted to be simple, but scaling simplicity is difficult. At Scale Slight variations of colors, fonts, numbers & other properties arise Stylesheet size may become unmanageable — With power of Sass (Sass NOT SASS) Keep your stylesheet DRY Revision are waaaay easier (no more find & replace all) Fancy new CSS3 properties becaome production-ready Build reusable mixins and functions Create your own stylesheet framework Sass and Compass Workshop - ©2014 Shaho Toofani
4. Why do we need CSS preprocessors? CSS is a declarative, not a programming language. variables — placeholders for something reusable. functions — manipulate values with operations (for example, make this color 20 percent lighter). it’s faster to write — for example nesting it’s more manageable — for example partials Sass and Compass Workshop - ©2014 Shaho Toofani
5. The DRY principle — Use variables (only define a value once) C S S a { c o l o r : b l u e ; } n a v { b a c k g r o u n d - c o l o r : b l u e ; } — DRY: don’t repeat yourself S C S S $ b r a n d - c o l o r : b l u e ; a { c o l o r : $ b r a n d - c o l o r ; } n a v { b a c k g r o u n d - c o l o r : $ b r a n d - c o l o r ; } Sass and Compass Workshop - ©2014 Shaho Toofani
6. Why you should use Sass and Compass — Automatic RGBA color values and conversions C S S . c o l o r - t r a d i t i o n a l { c o l o r : # 1 1 c 9 0 9 ; c o l o r : r g b a ( 1 7 , 2 0 1 , 9 , 0 . 9 ) ; } S C S S . c o l o r - m o d e r n { c o l o r : $ g r e e n ; c o l o r : r g b a ( $ g r e e n , 0 . 9 ) ; } Sass and Compass Workshop - ©2014 Shaho Toofani
7. Why you should use Sass and Compass — Forget about vendor prefixes C S S . r o u n d e d { - 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 ; - m s - b o r d e r - r a d i u s : 4 p x ; - o - 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 ; } S C S S . r o u n d e d { @ i n c l u d e b o r d e r - r a d i u s ( 4 p x ) ; } Sass and Compass Workshop - ©2014 Shaho Toofani
8. Why you should use Sass and Compass — Nesting rules C S S n a v a { c o l o r : # f f 0 b 1 3 ; } n a v a : h o v e r { c o l o r : # 1 1 c 9 0 9 ; } n a v a : v i s i t e d { c o l o r : # 0 9 1 f f f ; } S C S S n a v { a { c o l o r : $ r e d ; & : h o v e r { c o l o r : $ g r e e n ; } & : v i s i t e d { c o l o r : $ b l u e ; } } } Sass and Compass Workshop - ©2014 Shaho Toofani
9. Why you should use Sass and Compass — Media queries the simple way C S S @ m e d i a o n l y s c r e e n a n d ( m i n - w i d t h : 2 8 0 p x ) a n d ( m a x - w i d t h : 4 7 9 p x ) { . h 1 { f o n t - s i z e : 1 . 1 e m ; } } @ m e d i a o n l y s c r e e n a n d ( m i n - w i d t h : 4 8 0 p x ) a n d ( m a x - w i d t h : 5 9 9 p x ) { . h 1 { f o n t - s i z e : 0 . 9 e m ; } } S C S S h 1 { @ i n c l u d e M Q ( X S ) { f o n t - s i z e : 1 . 1 e m ; } @ i n c l u d e M Q ( S ) { f o n t - s i z e : 0 . 9 e m ; } } Sass and Compass Workshop - ©2014 Shaho Toofani
10. WHAT IS SASS? Style with attitude Sass and Compass Workshop - ©2014 Shaho Toofani
11. WHAT IS SASS? — CSS with superpowers - (it looks like CSS!) S C S S $ b l u e : # 3 b b f c e ; $ m a r g i n : 1 6 p x ; . c o n t e n t - n a v i g a t i o n { b o r d e r - c o l o r : $ b l u e ; c o l o r : d a r k e n ( $ b l u e , 9 % ) ; } . 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 / 2 ; b o r d e r - c o l o r : $ b l u e ; } Sass and Compass Workshop - ©2014 Shaho Toofani
12. WHAT IS SASS? — Sass is a CSS preprocessor A layer between the stylesheets you author and the .css files you serve to the browser. Sass is short for Syntactically Awesome Stylesheets. Created by , Primary developers are and . Hampton Catlin Nathan Weizenbaum Chris Eppstein Sass and Compass Workshop - ©2014 Shaho Toofani
13. WHAT IS SASS? — Official Website: http://sass-lang.com — The project's GitHub development homepage: https://github.com/nex3/sass Sass and Compass Workshop - ©2014 Shaho Toofani
14. INSTALLATION Don't panic! Sass and Compass Workshop - ©2014 Shaho Toofani
15. Installing Ruby Before we can install Sass and Compass, we need Ruby installed. If you are on OS X, you already have it. Sass and Compass Workshop - ©2014 Shaho Toofani
16. INSTALLING SASS — Command prompt (line) install Install Sass r u b y g e m i n s t a l l s a s s r u b y F e t c h i n g : s a s s - 3 . 2 . 1 2 . g e m ( 1 0 0 % ) S u c c e s s f u l l y i n s t a l l e d s a s s - 3 . 2 . 1 2 1 g e m i n s t a l l e d I n s t a l l i n g r i d o c u m e n t a t i o n f o r s a s s - 3 . 2 . 1 2 . . . I n s t a l l i n g R D o c d o c u m e n t a t i o n f o r s a s s - 3 . 2 . 1 2 . . . You’ve just installed Sass. Double-check: r u b y s a s s - v Sass and Compass Workshop - ©2014 Shaho Toofani
17. Monitor & convert the Sass files to CSS — To run Sass from the command line r u b y s a s s i n p u t . s c s s o u t p u t . c s s — Telling Sass which files to WATCH r u b y s a s s - - w a t c h s c r e e n . s c s s : s c r e e n . c s s — You can also tell Sass to watch an entire directory r u b y s a s s - - w a t c h s a s s : c s s Sass and Compass Workshop - ©2014 Shaho Toofani
18. USING APPS INSTEAD OF THE COMMAND LINE — Graphical tools for working with Sass and Compass Scout app - http://mhs.github.com/scout-app Scout is a free Adobe Air-based application. Sass and Compass Workshop - ©2014 Shaho Toofani
19. USING APPS INSTEAD OF THE COMMAND LINE — Graphical tools for working with Sass and Compass CodeKit - http://incident57.com/codekit Sass and Compass Workshop - ©2014 Shaho Toofani
20. USING APPS INSTEAD OF THE COMMAND LINE — Graphical tools for working with Sass and Compass LiveReload - http://livereload.com Sass and Compass Workshop - ©2014 Shaho Toofani
21. Useful Commands — Check which versions of Sass are available r u b y g e m l i s t s a s s – a – r — Installing the latest pre-release version r u b y g e m i n s t a l l s a s s - - p r e — Uninstall a specific version of Sass versionnumber is the release you want to remove (for example, 3.2.0.alpha.103). r u b y g e m u n i n s t a l l s a s s - - v e r s i o n v e r s i o n n u m b e r Sass and Compass Workshop - ©2014 Shaho Toofani
22. Choosing an output style — Nested (the default) C S S o l { m a r g i n : 1 0 p x 0 ; p a d d i n g : 1 0 p x 0 ; } o l l i { f o n t - s i z e : 2 e m ; l i n e - h e i g h t : 1 . 4 ; } o l l i p { c o l o r : # 3 3 3 ; } Sass and Compass Workshop - ©2014 Shaho Toofani
23. CHOOSING AN OUTPUT STYLE — Expanded C S S o l { m a r g i n : 1 0 p x 0 ; p a d d i n g : 1 0 p x 0 ; } o l l i { f o n t - s i z e : 2 e m ; l i n e - h e i g h t : 1 . 4 ; } o l l i p { c o l o r : # 3 3 3 ; } — Add a flag to the Watch command r u b y s a s s - - w a t c h - - s t y l e e x p a n d e d s c r e e n . s c s s : s c r e e n . c s s Sass and Compass Workshop - ©2014 Shaho Toofani
24. CHOOSING AN OUTPUT STYLE — Compact C S S o l { m a r g i n : 1 0 p x 0 ; p a d d i n g : 1 0 p x 0 ; } o l l i { f o n t - s i z e : 2 e m ; l i n e - h e i g h t : 1 . 4 ; } o l l i p { c o l o r : # 3 3 3 ; } — Add a flag to the Watch command r u b y s a s s - - w a t c h - - s t y l e c o m p a c t s c r e e n . s c s s : s c r e e n . c s s Sass and Compass Workshop - ©2014 Shaho Toofani
25. CHOOSING AN OUTPUT STYLE — Compressed C S S o l { m a r g i n : 1 0 p x 0 ; p a d d i n g : 1 0 p x 0 ; } o l l i { f o n t - s i z e : 2 e m ; l i n e - h e i g h t : 1 . 4 ; } o l l i p { c o l o r : # — Add a flag to the Watch command r u b y s a s s - - w a t c h - - s t y l e c o m p r e s s e d s c r e e n . s c s s : s c r e e n . c s s Sass and Compass Workshop - ©2014 Shaho Toofani
26. DON’T EDIT YOUR OUTPUT! N O T E ! it’s important to note that when you’re using Sass, you’ll no longer be editing any .css files. The .scss files are where you’ll live and breathe. The reason being, any changes you make to the .css file will eventually get overridden as soon as you update the .scss and Sass compiles the output. Sass and Compass Workshop - ©2014 Shaho Toofani
27. VARIABLES allow you to use the same value in multiple places, as well as perform basic maths and functions. Sass and Compass Workshop - ©2014 Shaho Toofani
28. Variables — Using variables: Colors - for example shades of a particular color Font Stacks Margin & Padding - consistency in design Border Widths Border Radius Sass and Compass Workshop - ©2014 Shaho Toofani
29. Variable Declaration — Numbers - can be set with or without units: S C S S $ r o u n d e d : 4 p x ; $ l i n e - h e i g h t : 1 . 5 ; $ f o n t - s i z e : 3 r e m ; — Colors S C S S $ b a s e : p u r p l e ; $ b o r d e r : r g b a ( 0 , 2 5 5 , 0 , 0 . 5 ) ; $ s h a d o w : # 3 3 3 ; — Booleans S C S S $ r o u n d e d : f a l s e ; $ s h a d o w : t r u e ; Sass and Compass Workshop - ©2014 Shaho Toofani
30. Variable Declaration — Strings - can be set with or without quotes: S C S S $ h e a d e r : ' H e l v e t i c a N e u e ' ; $ c a l l o u t : A r i a l ; $ m e s s a g e : " L o a d i n g . . . " ; — Lists S C S S $ c o l o r s : r e d , g r e e n , b l u e , y e l l o w ; $ m a r g i n : 4 0 p x 0 2 0 p x 1 0 0 p x ; — Null S C S S $ s h a d o w : n u l l ; Sass and Compass Workshop - ©2014 Shaho Toofani
31. Declaring and Referencing variables — Declaring a Sass variable: S C S S $ h i g h l i g h t - c o l o r : # a b c d e f ; $ h i g h l i g h t - b o r d e r : 1 p x $ h i g h l i g h t - c o l o r s o l i d ; — Referencing: S C S S . s e l e c t e d { b o r d e r : $ h i g h l i g h t - b o r d e r ; } C S S . s e l e c t e d { b o r d e r : 1 p x # a b c d e f s o l i d ; } Sass and Compass Workshop - ©2014 Shaho Toofani
32. Variable names: dashes or underscores? N O T E ! Different people prefer different styles; some use dashes to separate words within variables ($highlight- color), and some use underscores ($highlight_color). S C S S $ l i n k - c o l o r : b l u e ; a { c o l o r : $ l i n k _ c o l o r ; } In this example, $link-color and $link_color both refer to the same variable. In fact, dashes and underscores are interchangeable most places in Sass, including mixins and Sass functions. N O T E ! They aren’t interchangeable in the plain-CSS parts of Sass like class, ID, or property names, though. Sass and Compass Workshop - ©2014 Shaho Toofani
33. Variables — The Default Value S C S S $ t i t l e : ' M y B l o g ' ; $ t i t l e : ' A b o u t M e ' ; h 2 : b e f o r e { c o n t e n t : $ t i t l e ; } C S S h 2 : b e f o r e { c o n t e n t : ' A b o u t M e ' ; } Sass and Compass Workshop - ©2014 Shaho Toofani
34. Variables, The Default Flag — Variable definitions can optionally take the !default flag: S C S S $ t i t l e : ' M y B l o g ' ; $ t i t l e : ' A b o u t M e ' ! d e f a u l t ; h 2 : b e f o r e { c o n t e n t : $ t i t l e ; } C S S h 2 : b e f o r e { c o n t e n t : ' M y B l o g ' ; } Sass and Compass Workshop - ©2014 Shaho Toofani
35. Variables Scope Variables set inside a declaration (within { }) aren't usable outside that block S C S S p { $ b o r d e r : # c c c ; b o r d e r - t o p : 1 p x s o l i d $ b o r d e r ; } h 1 { b o r d e r - t o p : 1 p x s o l i d $ b o r d e r ; } r u b y S y n t a x e r r o r : U n d e f i n e d v a r i a b l e : " $ b o r d e r " Sass and Compass Workshop - ©2014 Shaho Toofani
36. Variables Scope Setting new values to variables set outside a declaration changes future instances S C S S $ c o l o r - b a s e : # 7 7 7 ; . s i d e b a r { $ c o l o r - b a s e : # 2 2 2 ; b a c k g r o u n d : $ c o l o r - b a s e ; } p { c o l o r : $ c o l o r - b a s e ; } C S S . s i d e b a r { b a c k g r o u n d : # 2 2 2 2 2 2 ; } p { c o l o r : # 2 2 2 2 2 2 ; } Sass and Compass Workshop - ©2014 Shaho Toofani
37. Variables in real world S C S S $ p a g e _ w i d t h : 9 6 0 p x ; $ n a v _ t a b s : 6 ; $ t a b _ w i d t h : r o u n d ( $ p a g e _ w i d t h - $ n a v _ t a b s ) - 1 ; S C S S $ p a g e _ w i d t h : 9 6 0 p x ; $ n a v _ t a b s : 7 ; $ t a b _ w i d t h : r o u n d ( $ p a g e _ w i d t h - $ n a v _ t a b s ) - 1 ; Sass and Compass Workshop - ©2014 Shaho Toofani
38. What about CSS variables? N O T E ! Currently a W3C working draft, “CSS Variables Module Level 1,” is being developed: http://www.w3.org/TR/css-variables — Define a CSS variable: C S S : r o o t { v a r - c o l o r - m a i n : # 3 3 3 ; } — Use the variable within a declaration: C S S # m a i n p { c o l o r : v a r ( c o l o r - m a i n ) ; } The proposal uses a var prefix to define the variable but a var(variable-name) syntax for values. Sass and Compass Workshop - ©2014 Shaho Toofani
39. OPERATIONS Sass and Compass Workshop - ©2014 Shaho Toofani
40. Operations S C S S $ c o l u m n : 1 0 % ; $ m a r g i n : 1 6 p x ; . i s l a n d { w i d t h : $ c o l u m n * 4 ; m a r g i n : $ m a r g i n * 2 $ m a r g i n / 2 $ m a r g i n + 2 0 $ m a r g i n ; p a d d i n g : $ m a r g i n * 0 . 2 5 ; } C S S . i s l a n d { w i d t h : 4 0 % ; m a r g i n : 3 2 p x 8 p x 3 6 p x 1 6 p x ; p a d d i n g : 4 p x ; } Sass and Compass Workshop - ©2014 Shaho Toofani
41. Variables & Operations — Interpolation (escaping) C S S p { f o n t : 1 e m / 1 . 5 e m " O p e n S a n s " , A r i a l , S a n s - S e r i f ; } — Wrap with #{ } Interpolation brackets #{} : That’s a special way to alert Sass to compile something within a selector or property name; useful for paths & long strings. S C S S $ b a s e t y p e s i z e : 1 e m ; p { f o n t : # { $ b a s e t y p e s i z e } / # { $ b a s e t y p e s i z e * 1 . 5 } $ m a i n f o n t ; } Sass and Compass Workshop - ©2014 Shaho Toofani
42. Variables & Operations — Negatives S C S S $ m a r g i n : 1 0 p x ; . m o v e u p { m a r g i n : - $ m a r g i n * 4 - $ m a r g i n * 2 0 $ m a r g i n ; } C S S . m o v e u p { m a r g i n : - 6 0 p x 0 1 0 p x ; } Sass and Compass Workshop - ©2014 Shaho Toofani
43. Variables & Operations — Negatives Wrap in brackets: (-$variable*value) S C S S $ m a r g i n : 1 0 p x ; . m o v e u p { m a r g i n : ( - $ m a r g i n * 4 ) ( - $ m a r g i n * 2 ) 0 $ m a r g i n ; } C S S . m o v e u p { m a r g i n : - 4 0 p x - 2 0 p x 0 1 0 p x ; } Sass and Compass Workshop - ©2014 Shaho Toofani
44. NESTING Sass avoids repetition by nesting selectors within one another. The same thing works with properties. Sass and Compass Workshop - ©2014 Shaho Toofani
45. NESTING RULES — Nest & indent Nest CSS rules inside each other instead of repeating selectors in separate declarations C S S h e a d e r [ r o l e = " b a n n e r " ] { m a r g i n : 2 0 p x 0 3 0 p x 0 ; b o r d e r - b o t t o m : 4 p x s o l i d # 3 3 3 ; } h e a d e r [ r o l e = " b a n n e r " ] # l o g o { f l o a t : l e f t ; m a r g i n : 0 2 0 p x 0 0 ; } h e a d e r [ r o l e = " b a n n e r " ] # l o g o i m g { d i s p l a y : b l o c k ; o p a c i t y : . 9 5 ; } S C S S h e a d e r [ r o l e = " b a n n e r " ] { m a r g i n : 2 0 p x 0 3 0 p x 0 ; b o r d e r - b o t t o m : 4 p x s o l i d # 3 3 3 ; # l o g o { f l o a t : l e f t ; m a r g i n : 0 2 0 p x 0 0 ; i m g { d i s p l a y : b l o c k ; o p a c i t y : . 9 5 ; } } } Sass and Compass Workshop - ©2014 Shaho Toofani
46. NESTING RULES — Nesting namespaces C S S h 4 { f o n t - f a m i l y : G e o r g i a , S e r i f ; f o n t - s t y l e : n o r m a l ; f o n t - w e i g h t : b o l d ; f o n t - v a r i a n t : s m a l l - c a p s ; } S C S S h 4 { f o n t : { f a m i l y : G e o r g i a , S e r i f ; s t y l e : n o r m a l ; w e i g h t : b o l d ; v a r i a n t : s m a l l - c a p s ; } } Sass and Compass Workshop - ©2014 Shaho Toofani
47. NESTING RULES — Nest child and sibling combinators S C S S a r t i c l e { > h 2 { b o r d e r - t o p : 1 p x d a s h e d # e e e } / / c h i l d c o m b i n a t o r ~ s e c t i o n { p a d d i n g - t o p : 1 . 5 e m } / / g e n e r a l s i b l i n g c o m b i n a t o r + f o o t e r { m a r g i n - t o p : 0 } / / a d j a c e n t s i b l i n g c o m b i n a t o r * { c o l o r : # 0 0 0 } } C S S a r t i c l e > h 2 { b o r d e r - t o p : 1 p x d a s h e d # e e e } a r t i c l e ~ s e c t i o n { p a d d i n g - t o p : 1 . 5 e m } a r t i c l e + f o o t e r { m a r g i n - t o p : 0 } a r t i c l e * { c o l o r : # 0 0 0 } Sass and Compass Workshop - ©2014 Shaho Toofani
48. REFERENCING PARENT SELECTORS WITH & — Pulls the parent selector into the & C S S a { f o n t - w e i g h t : b o l d ; t e x t - d e c o r a t i o n : n o n e ; c o l o r : r e d ; b o r d e r - b o t t o m : 2 p x s o l i d r e d ; } a : h o v e r { c o l o r : b l u e ; b o r d e r - c o l o r : b l u e ; } S C S S a { f o n t - w e i g h t : b o l d ; t e x t - d e c o r a t i o n : n o n e ; c o l o r : r e d ; b o r d e r - b o t t o m : 2 p x s o l i d r e d ; & : h o v e r { c o l o r : b l u e ; b o r d e r - c o l o r : b l u e ; } } Sass and Compass Workshop - ©2014 Shaho Toofani
49. REFERENCING PARENT SELECTORS WITH & — While nesting, the & symbol references the parent selector S C S S . c o n t e n t { b o r d e r : 1 p x s o l i d # c c c ; p a d d i n g : 2 0 p x ; . i n f o { b o r d e r - c o l o r : r e d ; } & . i n f o { b o r d e r - c o l o r : g r e e n ; } } C S S . c o n t e n t { b o r d e r : 1 p x s o l i d # c c c ; p a d d i n g : 2 0 p x ; } . c o n t e n t . i n f o { b o r d e r - c o l o r : r e d ; } . c o n t e n t . i n f o { b o r d e r - c o l o r : g r e e n ; } Sass and Compass Workshop - ©2014 Shaho Toofani
50. REFERENCING PARENT SELECTORS WITH & — Ampersand & prepends before parent selector C S S s e c t i o n . m a i n p { m a r g i n : 0 0 2 0 p x 0 ; f o n t - s i z e : 1 8 p x ; l i n e - h e i g h t : 1 . 5 ; } b o d y . s t o r e s e c t i o n . m a i n p { f o n t - s i z e : 1 6 p x ; l i n e - h e i g h t : 1 . 4 ; } S C S S s e c t i o n . m a i n p { m a r g i n : 0 0 2 0 p x 0 ; f o n t - s i z e : 1 8 p x ; l i n e - h e i g h t : 1 . 5 ; b o d y . s t o r e & { f o n t - s i z e : 1 6 p x ; l i n e - h e i g h t : 1 . 4 ; } } Sass and Compass Workshop - ©2014 Shaho Toofani
51. REFERENCING PARENT SELECTORS WITH & — & loves working with Modernizr S C S S b u t t o n { b a c k g r o u n d : l i n e a r - g r a d i e n t ( # 4 4 4 , # 2 2 2 ) ; . n o - c s s g r a d i e n t s & { b a c k g r o u n d : # 3 3 3 } } C S S b u t t o n { b a c k g r o u n d : l i n e a r - g r a d i e n t ( # 4 4 4 , # 2 2 2 ) ; } . n o - c s s g r a d i e n t s b u t t o n { b a c k g r o u n d : # 3 3 3 } Sass and Compass Workshop - ©2014 Shaho Toofani
52. Wrap up! - Variables, Nesting S C S S $ s i z e : 1 6 p x ; h 1 { f o n t : { f a m i l y : A r i a l , s a n s - s e r i f ; s i z e : $ s i z e ; } . i n t r o d u c t i o n & { f o n t : { f a m i l y : " m o n a c o " , A r i a l , s a n s - s e r i f ; s i z e : $ s i z e * 1 . 5 ; } } } C S S h 1 { f o n t - f a m i l y : A r i a l , s a n s - s e r i f ; f o n t - s i z e : 1 6 p x ; } . i n t r o d u c t i o n h 1 { f o n t - f a m i l y : " m o n a c o " , A r i a l , s a n s - s e r i f ; f o n t - s i z e : 2 4 p x ; } Sass and Compass Workshop - ©2014 Shaho Toofani
53. Nesting Pitfalls N O T E ! Nesting is easy, but dangerous! Do not nest unnecessarily; Try limiting your nesting to 3 or 4 levels and consider refactoring anything deeper. S C S S . c o n t e n t { b a c k g r o u n d : # c c c ; . c e l l { h 2 { a { & : h o v e r { c o l o r : r e d ; } } } } } C S S . c o n t e n t { b a c k g r o u n d : # c c c ; } . c o n t e n t . c e l l h 2 a : h o v e r { c o l o r : r e d ; } Sass and Compass Workshop - ©2014 Shaho Toofani
54. COMMENTING IN SASS — Multi-line comments S C S S / * T h i s i s a m u l t i - l i n e c o m m e n t t h a t w i l l a p p e a r i n t h e f i n a l . c s s f i l e . * / — Multi-line (Loud) comments S C S S / * ! T h i s i s a m u l t i - l i n e c o m m e n t t h a t w i l l a p p e a r i n t h e f i n a l . c s s f i l e . E v e n i n c o m p r e s s e d s t y l e . * / — Single-line (Silent) comments Single-line comments use the // prefix at the beginning of each line and aren’t included in the final output S C S S / / T h i s i s a s i n g l e - l i n e c o m m e n t . / / S i n g l e - l i n e c o m m e n t s a r e r e m o v e d f r o m t h e . c s s f i l e . Sass and Compass Workshop - ©2014 Shaho Toofani
55. MIXINS mixins allow you to re-use whole chunks of CSS, properties or selectors. You can even give them arguments. Sass and Compass Workshop - ©2014 Shaho Toofani
56. MIXINS — Mixins allow you to easily share styles among different parts of the stylesheet. C S S u l . p l a i n { c o l o r : # 4 4 4 ; l i s t - s t y l e : n o n e ; } u l . p l a i n l i { l i s t - s t y l e - i m a g e : n o n e ; l i s t - s t y l e - t y p e : n o n e ; m a r g i n - l e f t : 0 ; } S C S S @ m i x i n n o - b u l l e t s { l i s t - s t y l e : n o n e ; l i { l i s t - s t y l e - i m a g e : n o n e ; l i s t - s t y l e - t y p e : n o n e ; m a r g i n - l e f t : 0 ; } } Sass and Compass Workshop - ©2014 Shaho Toofani
57. MIXINS — Mixins allow you to define and reuse blocks of styles S C S S @ m i x i n r o u n d - c o r n e r ( $ r a d i u s : 4 p x ) { - w e b k i t - b o r d e r - r a d i u s : $ r a d i u s ; - m o z - b o r d e r - r a d i u s : $ r a d i u s ; b o r d e r - r a d i u s : $ r a d i u s ; } begin with @mixin give it a name add your $variable(s) give (an) optional default value(s) and ... Sass and Compass Workshop - ©2014 Shaho Toofani
58. MIXINS — Call it with @include S C S S . m e s s a g e { w i d t h : 1 0 0 p x ; @ i n c l u d e r o u n d - c o r n e r ( 1 0 ) ; } C S S . m e s s a g e { w i d t h : 1 0 0 p x ; - w e b k i t - b o r d e r - r a d i u s : 1 0 p x ; - m o z - b o r d e r - r a d i u s : 1 0 p x ; b o r d e r - r a d i u s : 1 0 p x ; } Sass and Compass Workshop - ©2014 Shaho Toofani
59. MIXINS — Mixin with Multiple Arguments arguments are comma-seperated and passed in order S C S S @ m i x i n b u t t o n ( $ r a d i u s , $ c o l o r ) { b o r d e r - r a d i u s : $ r a d i u s ; c o l o r : $ c o l o r ; } . b t n - a { @ i n c l u d e b u t t o n ( 4 p x , # 0 0 0 ) ; } C S S . b t n - a { b o r d e r - r a d i u s : 4 p x ; c o l o r : # 0 0 0 ; } Sass and Compass Workshop - ©2014 Shaho Toofani
60. MIXINS — Mixin with Multiple Arguments too few arguments S C S S @ m i x i n b u t t o n ( $ r a d i u s , $ c o l o r ) { b o r d e r - r a d i u s : $ r a d i u s ; c o l o r : $ c o l o r ; } . b t n - a { @ i n c l u d e b u t t o n ( 4 p x ) ; } r u b y S y n t a x e r r o r : M i x i n b u t t o n i s m i s s i n g a r g u m e n t $ c o l o r . Sass and Compass Workshop - ©2014 Shaho Toofani
61. MIXINS — Mixin with Multiple Arguments Optional arguments S C S S @ m i x i n b u t t o n ( $ r a d i u s , $ c o l o r : # 0 0 0 ) { b o r d e r - r a d i u s : $ r a d i u s ; c o l o r : $ c o l o r ; } . b t n - a { @ i n c l u d e b u t t o n ( 4 p x ) ; } C S S . b t n - a { b o r d e r - r a d i u s : 4 p x ; c o l o r : # 0 0 0 ; } Sass and Compass Workshop - ©2014 Shaho Toofani
62. MIXINS — Mixin with Multiple Arguments Optionals come last! S C S S @ m i x i n b u t t o n ( $ c o l o r : # 0 0 0 , $ r a d i u s ) { b o r d e r - r a d i u s : $ r a d i u s ; c o l o r : $ c o l o r ; } . b t n - a { @ i n c l u d e b u t t o n ( 4 p x ) ; } r u b y S y n t a x e r r o r : R e q u i r e d a r g u m e n t $ c o l o r m u s t c o m e b e f o r e a n y o p t i o n a l a r g u m e n t s . Sass and Compass Workshop - ©2014 Shaho Toofani
63. MIXINS — Mixin with Multiple Arguments Keyword arguments allow passing in any order S C S S @ m i x i n b u t t o n ( $ r a d i u s , $ c o l o r : # 0 0 0 ) { b o r d e r - r a d i u s : $ r a d i u s ; c o l o r : $ c o l o r ; } @ i n c l u d e b u t t o n ( $ c o l o r : # 7 7 7 , $ r a d i u s : 5 p x ) ; } C S S . b t n - a { b o r d e r - r a d i u s : 5 p x ; c o l o r : # 7 7 7 7 7 7 ; } Sass and Compass Workshop - ©2014 Shaho Toofani
64. CSS3 LOVES MIXINS — box-shadow S C S S @ m i x i n s h a d o w ( $ x , $ y , $ b l u r , $ c o l o r ) { - w e b k i t - b o x - s h a d o w : $ x $ y $ b l u r $ c o l o r ; - m o z - b o x - s h a d o w : $ x $ y $ b l u r $ c o l o r ; b o x - s h a d o w : $ x $ y $ b l u r $ c o l o r ; } S C S S # s i d e b a r { @ i n c l u d e s h a d o w ( 0 , 1 p x , 2 p x , r g b a ( 0 , 0 , 0 , . 5 ) ) ; } C S S # s i d e b a r { - w e b k i t - b o x - s h a d o w : 0 , 1 p x , 2 p x , r g b a ( 0 , 0 , 0 , . 5 ) ; - m o z - b o x - s h a d o w : 0 , 1 p x , 2 p x , r g b a ( 0 , 0 , 0 , . 5 ) ; b o x - s h a d o w : 0 , 1 p x , 2 p x , r g b a ( 0 , 0 , 0 , . 5 ) ; } Sass and Compass Workshop - ©2014 Shaho Toofani
65. Mixins - Variable Arguments C S S . b t n - a { - w e b k i t - t r a n s i t i o n : c o l o r 0 . 3 s e a s e - i n , b a c k g r o u n d 0 . 5 s e a s e - o u t ; - m o z - t r a n s i t i o n : c o l o r 0 . 3 s e a s e - i n , b a c k g r o u n d 0 . 5 s e a s e - o u t ; t r a n s i t i o n : c o l o r 0 . 3 s e a s e - i n , b a c k g r o u n d 0 . 5 s e a s e - o u t ; } — Passing valid, comma-separated CSS as a single value S C S S @ m i x i n t r a n s i t i o n ( $ v a l ) { - w e b k i t - t r a n s i t i o n : $ v a l ; - m o z - t r a n s i t i o n : $ v a l ; t r a n s i t i o n : $ v a l ; } . b t n - a { @ i n c l u d e t r a n s i t i o n ( c o l o r 0 . 3 s e a s e - i n , b a c k g r o u n d 0 . 5 s e a s e - o u t ) ; } — will throw an ERROR ... r u b y M i x i n t r a n s i t i o n t a k e s 1 a r g u m e n t b u t 2 w e r e p a s s e d . Sass and Compass Workshop - ©2014 Shaho Toofani
66. Mixins - Variable Arguments — Variable Arguments Adding ... to an argument creates a variable argument (vararg) S C S S @ m i x i n t r a n s i t i o n ( $ v a l . . . ) { - w e b k i t - t r a n s i t i o n : $ v a l ; - m o z - t r a n s i t i o n : $ v a l ; t r a n s i t i o n : $ v a l ; } . b t n - a { @ i n c l u d e t r a n s i t i o n ( c o l o r 0 . 3 s e a s e - i n , b a c k g r o u n d 0 . 5 s e a s e - o u t ) ; } C S S . b t n - a { - w e b k i t - t r a n s i t i o n : c o l o r 0 . 3 s e a s e - i n , b a c k g r o u n d 0 . 5 s e a s e - o u t ; - m o z - t r a n s i t i o n : c o l o r 0 . 3 s e a s e - i n , b a c k g r o u n d 0 . 5 s e a s e - o u t ; t r a n s i t i o n : c o l o r 0 . 3 s e a s e - i n , b a c k g r o u n d 0 . 5 s e a s e - o u t ; } Sass and Compass Workshop - ©2014 Shaho Toofani
67. Mixins - Variable Arguments — Variable arguments in reverse Previous example: passing a list which is split into arguments by the mixin S C S S @ m i x i n b u t t o n ( $ r a d i u s , $ c o l o r ) { b o r d e r - r a d i u s : $ r a d i u s ; c o l o r : $ c o l o r ; } $ p r o p e r t i e s : 4 p x , # 0 0 0 ; . b t n - a { @ i n c l u d e b u t t o n ( $ p r o p e r t i e s . . . ) ; } C S S . b t n - a { b o r d e r - r a d i u s : 4 p x ; c o l o r : # 0 0 0 ; } Sass and Compass Workshop - ©2014 Shaho Toofani
68. CSS3 LOVES MIXINS — gradient S C S S @ m i x i n l i n e a r - g r a d i e n t ( $ f r o m , $ t o ) { b a c k g r o u n d - c o l o r : $ t o ; b a c k g r o u n d - i m a g e : - w e b k i t - l i n e a r - g r a d i e n t ( t o p , $ f r o m , $ t o ) ; b a c k g r o u n d - i m a g e : - m o z - l i n e a r - g r a d i e n t ( t o p , $ f r o m , $ t o ) ; b a c k g r o u n d - i m a g e : - m s - l i n e a r - g r a d i e n t ( t o p , $ f r o m , $ t o ) ; b a c k g r o u n d - i m a g e : - o - l i n e a r - g r a d i e n t ( t o p , $ f r o m , $ t o ) ; b a c k g r o u n d - i m a g e : l i n e a r - g r a d i e n t ( t o b o t t o m , $ f r o m , $ t o ) ; f i l t e r : p r o g i d : D X I m a g e T r a n s f o r m . M i c r o s o f t . g r a d i e n t ( s t a r t C o l o r s t r = ' $ f r o m ' , e n d C o l o r s t r = ' $ t - m s - f i l t e r : q u o t e ( p r o g i d : D X I m a g e T r a n s f o r m . M i c r o s o f t . g r a d i e n t ( s t a r t C o l o r s t r = ' $ f r o m ' , e n d C o l o r s } S C S S . d e m o { w i d t h : 3 0 0 p x ; h e i g h t : 3 0 0 p x ; @ i n c l u d e l i n e a r - g r a d i e n t ( # 4 4 4 , # 0 0 0 0 f f ) ; } Sass and Compass Workshop - ©2014 Shaho Toofani
69. INTERPOLATION — Use interpolation inside Mixins - gradient revisited S C S S @ m i x i n l i n e a r - g r a d i e n t ( $ f r o m , $ t o ) { b a c k g r o u n d - c o l o r : $ t o ; b a c k g r o u n d - i m a g e : - w e b k i t - l i n e a r - g r a d i e n t ( t o p , $ f r o m , $ t o ) ; b a c k g r o u n d - i m a g e : - m o z - l i n e a r - g r a d i e n t ( t o p , $ f r o m , $ t o ) ; b a c k g r o u n d - i m a g e : - m s - l i n e a r - g r a d i e n t ( t o p , $ f r o m , $ t o ) ; b a c k g r o u n d - i m a g e : - o - l i n e a r - g r a d i e n t ( t o p , $ f r o m , $ t o ) ; b a c k g r o u n d - i m a g e : l i n e a r - g r a d i e n t ( t o b o t t o m , $ f r o m , $ t o ) ; f i l t e r : p r o g i d : D X I m a g e T r a n s f o r m . M i c r o s o f t . g r a d i e n t ( s t a r t C o l o r s t r = ' # { $ f r o m } ' , e n d C o l o r s t r = - m s - f i l t e r : q u o t e ( p r o g i d : D X I m a g e T r a n s f o r m . M i c r o s o f t . g r a d i e n t ( s t a r t C o l o r s t r = ' # { $ f r o m } ' , e n d C o l } S C S S . d e m o { w i d t h : 3 0 0 p x ; h e i g h t : 3 0 0 p x ; @ i n c l u d e l i n e a r - g r a d i e n t ( # 4 4 4 , # 0 0 0 0 f f ) ; } Sass and Compass Workshop - ©2014 Shaho Toofani
70. @EXTEND The @extend directive (tells) Sass that one selector should inherit the styles of another selector. Sass and Compass Workshop - ©2014 Shaho Toofani
71. @extend directive — The @extend directive is used to extend another style. Nest @extend .classname Goes inside another class Don’t have to use multiple classes Association is in CSS not HTML C S S . b u t t o n { b a c k g r o u n d : b l u e ; c o l o r : w h i t e ; p a d d i n g : 0 . 2 e m 0 . 8 e m ; b o r d e r - r a d i u s : 0 . 4 e m ; } S C S S . b u t t o n - d e l e t e { @ e x t e n d . b u t t o n ; b a c k g r o u n d : r e d ; } Sass and Compass Workshop - ©2014 Shaho Toofani
72. @extend directive — Selector inheritance S C S S . b o x { p a d d i n g : 2 e m ; c o l o r : b l a c k ; b a c k g r o u n d - c o l o r : w h i t e ; } . w a r n i n g - b o x { @ e x t e n d . b o x ; b o r d e r : 2 p x d o t t e d r e d ; } . s u c c e s s - b o x { @ e x t e n d . b o x ; b o r d e r : 2 p x d o t t e d c h a r t r e u s e ; } . i n f o - b o x { @ e x t e n d . b o x ; b o r d e r : 2 p x d o t t e d b l u e ; } C S S . b o x , . w a r n i n g - b o x , . s u c c e s s - b o x , . i n f o - b o x { p a d d i n g : 2 e m ; c o l o r : b l a c k ; b a c k g r o u n d - c o l o r : w h i t e ; } . w a r n i n g - b o x { b o r d e r : 2 p x d o t t e d r e d ; } . s u c c e s s - b o x { b o r d e r : 2 p x d o t t e d c h a r t r e u s e ; } . i n f o - b o x { b o r d e r : 2 p x d o t t e d b l u e ; } Sass and Compass Workshop - ©2014 Shaho Toofani
73. Multiple @extends You can also @extend multiple classes within a declaration, which chains together all the styles from each class: S C S S $ c o l o r - a c c e n t : # e a 4 c 8 9 ; . a l e r t { p a d d i n g : 1 5 p x ; f o n t - s i z e : 1 . 2 e m ; t e x t - a l i g n : c e n t e r ; b a c k g r o u n d : $ c o l o r - a c c e n t ; } . i m p o r t a n t { f o n t - s i z e : 4 e m ; } S C S S . a l e r t - p o s i t i v e { @ e x t e n d . a l e r t ; @ e x t e n d . i m p o r t a n t ; b a c k g r o u n d : # 9 c 3 ; } Sass and Compass Workshop - ©2014 Shaho Toofani
74. Multiple @extends Which will compile to: C S S . a l e r t , a l e r t - p o s i t i v e { p a d d i n g : 1 5 p x ; f o n t - s i z e : 1 . 2 e m ; t e x t - a l i g n : c e n t e r ; b a c k g r o u n d : # e a 4 c 8 9 ; } . i m p o r t a n t , . a l e r t - p o s i t i v e { f o n t - s i z e : 4 e m ; } . a l e r t - p o s i t i v e { b a c k g r o u n d : # 9 c 3 ; } Sass and Compass Workshop - ©2014 Shaho Toofani
75. PLACEHOLDER Sass and Compass Workshop - ©2014 Shaho Toofani
76. Using placeholder selectors with @extend Placeholder selectors allow you to define classes that won’t appear in the outputted CSS on their own. You can reference placeholders using @extend. S C S S % b u t t o n { p a d d i n g : 1 0 p x ; f o n t - w e i g h t : b o l d ; b o r d e r - r a d i u s : 6 p x ; } S C S S . s u b m i t { @ e x t e n d % b u t t o n ; b a c k g r o u n d : g r e e n ; } C S S . s u b m i t { p a d d i n g : 1 0 p x ; f o n t - w e i g h t : b o l d ; b o r d e r - r a d i u s : 6 p x ; b a c k g r o u n d : g r e e n ; } Sass and Compass Workshop - ©2014 Shaho Toofani
77. Using placeholder selectors with @extend — Use placeholder selectors to extend styles only when needed S C S S % b o x { p a d d i n g : 2 e m ; c o l o r : b l a c k ; b a c k g r o u n d - c o l o r : w h i t e ; } . w a r n i n g - b o x { @ e x t e n d % b o x ; b o r d e r : 2 p x d o t t e d r e d ; } . s u c c e s s - b o x { @ e x t e n d % b o x ; b o r d e r : 2 p x d o t t e d c h a r t r e u s e ; } . i n f o - b o x { @ e x t e n d % b o x ; b o r d e r : 2 p x d o t t e d b l u e ; } C S S . w a r n i n g - b o x , . s u c c e s s - b o x , . i n f o - b o x { p a d d i n g : 2 e m ; c o l o r : b l a c k ; b a c k g r o u n d - c o l o r : w h i t e ; } . w a r n i n g - b o x { b o r d e r : 2 p x d o t t e d r e d ; } . s u c c e s s - b o x { b o r d e r : 2 p x d o t t e d c h a r t r e u s e ; } . i n f o - b o x { b o r d e r : 2 p x d o t t e d b l u e ; } Sass and Compass Workshop - ©2014 Shaho Toofani
78. Using placeholder selectors with @extend — Define clearfix as placeholder Output will be: S C S S % c l e a r f i x { & : a f t e r { c o n t e n t : " " ; d i s p l a y : b l o c k ; c l e a r : b o t h ; } } S C S S # c o n t a i n e r { p o s i t i o n : r e l a t i v e ; m i n - w i d t h : 4 2 . 5 e m ; @ e x t e n d % c l e a r f i x ; } C S S # c o n t a i n e r : a f t e r { c o n t e n t : " " ; d i s p l a y : b l o c k ; c l e a r : b o t h ; } # c o n t a i n e r { p o s i t i o n : r e l a t i v e ; m i n - w i d t h : 4 2 . 5 e m ; } Sass and Compass Workshop - ©2014 Shaho Toofani
79. .sass Indented Sass Sass and Compass Workshop - ©2014 Shaho Toofani
80. .scss vs .sass — Indented syntax (.sass) relies on whitespace to simplify S C S S . c o n t e n t { b o r d e r : 1 p x s o l i d # c c c ; p a d d i n g : 2 0 p x ; h 2 { f o n t - s i z e : 3 e m ; m a r g i n : 2 0 p x 0 ; } } S A S S . c o n t e n t b o r d e r : 1 p x s o l i d # c c c p a d d i n g : 2 0 p x h 2 f o n t - s i z e : 3 e m m a r g i n : 2 0 p x 0 Sass and Compass Workshop - ©2014 Shaho Toofani
81. .scss vs .sass — Mixin declaration S C S S @ m i x i n b o x - s i z i n g ( $ x ) { - w e b k i t - b o x - s i z i n g : $ x ; - m o z - b o x - s i z i n g : $ x ; b o x - s i z i n g : $ x ; } . c o n t e n t { @ i n c l u d e b o x - s i z i n g ( b o r d e r - b o x ) ; } S A S S = b o x - s i z i n g ( $ x ) - w e b k i t - b o x - s i z i n g : $ x - m o z - b o x - s i z i n g : $ x b o x - s i z i n g : $ x . c o n t e n t + b o x - s i z i n g ( b o r d e r - b o x ) Read more: Sass vs. SCSS: which syntax is better? Sass and Compass Workshop - ©2014 Shaho Toofani
82. FUNCTIONS Sass and Compass Workshop - ©2014 Shaho Toofani
83. Writing functions in Sass A function is a self contained tool to generate a value that can be used elsewhere. The result of a function can be used in a mixin or directly into the style sheet. S C S S @ f u n c t i o n f l u i d - i t ( ) { @ r e t u r n 3 5 % ; / / a l w a y s r e t u r n 3 5 % } . s i d e b a r { w i d t h : f l u i d - i t ( ) ; } The @return directive tells Sass to return something: C S S . s i d e b a r { w i d t h : 3 5 % ; } Sass and Compass Workshop - ©2014 Shaho Toofani
84. Writing functions in Sass — Function with arguments S C S S @ f u n c t i o n s q u a r e ( $ v a l u e ) { @ r e t u r n ( $ v a l u e * $ v a l u e ) ; } p { m a r g i n - l e f t : s q u a r e ( 2 p x ) ; } Will return: C S S p { m a r g i n - l e f t : 4 p x ; } Sass and Compass Workshop - ©2014 Shaho Toofani
85. Writing functions in Sass — Use functions target / context For example, If the target size of our sidebar is 400px and the context of its parent is 1000px: S C S S @ f u n c t i o n f l u i d - i t ( $ t a r g e t , $ c o n t e x t ) { @ r e t u r n ( $ t a r g e t / $ c o n t e x t ) * 1 0 0 % ; } . s i d e b a r { w i d t h : f l u i d - i t ( 4 0 0 , 1 0 0 0 ) ; } C S S . s i d e b a r { w i d t h : 4 0 % ; } Create a CSS grid using calc() Sass and Compass Workshop - ©2014 Shaho Toofani
86. COLORS Sass and Compass Workshop - ©2014 Shaho Toofani
87. Colors — Built-in color functions S C S S $ l i n k c o l o r : # c e 4 d d 6 ; a { c o l o r : $ l i n k c o l o r ; & : h o v e r { c o l o r : l i g h t e n ( $ l i n k c o l o r , 3 0 % ) ; } & : a c t i v e { c o l o r : d a r k e n ( $ l i n k c o l o r , 3 0 % ) ; } } C S S a { c o l o r : # c e 4 d d 6 ; } a : h o v e r { c o l o r : # f 0 c 9 f 3 ; } a : a c t i v e { c o l o r : # 6 b 1 a 7 0 ; } Sass and Compass Workshop - ©2014 Shaho Toofani
88. Colors — RGB Functions S C S S r g b ( $ r e d , $ g r e e n , $ b l u e ) Creates a Color from red, green, and blue values. Creates a Color from red, green, blue, and alpha values. S C S S r g b a ( $ r e d , $ g r e e n , $ b l u e , $ a l p h a ) Gets the red component of a color. S C S S r e d ( $ c o l o r ) Mixes two colors together. S C S S m i x ( $ c o l o r - 1 , $ c o l o r - 2 ) Sass RGB Functions (List) Sass and Compass Workshop - ©2014 Shaho Toofani
89. Colors — The RGBA function S C S S a { c o l o r : r g b a ( b l u e , 0 . 7 5 ) } p { b a c k g r o u n d : r g b a ( # f f a , 0 . 2 5 ) } C S S a { c o l o r : r g b a ( 2 5 5 , 2 5 5 , 1 7 0 , 0 . 2 5 ) } p { b a c k g r o u n d : r g b a ( 2 5 5 , 2 5 5 , 1 7 0 , 0 . 2 5 ) } — Inspecting Colors S C S S $ c o l o r : r e d ; / / # f f 0 0 0 0 h u e ( $ c o l o r ) ; / / 0 d e g s a t u r a t i o n ( $ c o l o r ) ; / / 1 0 0 % l i g h t n e s s ( $ c o l o r ) ; / / 5 0 % r e d ( $ c o l o r ) ; / / 1 0 0 g r e e n ( $ c o l o r ) ; / / 0 b l u e ( $ c o l o r ) ; / / 0 a l p h a ( $ c o l o r ) ; / / 1 0 0 Sass and Compass Workshop - ©2014 Shaho Toofani
90. Colors — Manipulating Colors Sass and Compass Workshop - ©2014 Shaho Toofani
91. Colors N O T E ! HSLA Colors Hue Hue is a degree on the color wheel; 0 (or 360) is red, 120 is green, 240 is blue. Numbers in between reflect different shades. Saturation is a percentage value; 100% is the full color. 0% is completely denatured (grayscale). Lightness is also a percentage; 0% is dark (black), 100% is light (white), and 50% is the average. Alpha Opacity/Transparency value. 0 is fully transparent. 1 is fully opaque. 0.5 is 50% transparent. Yay for HSLa Sass and Compass Workshop - ©2014 Shaho Toofani
92. Colors — HSLA Manipulations S C S S a d j u s t - h u e ( # 7 7 a 7 f 9 , 9 0 ) ; S C S S s a t u r a t e ( # 9 b 8 a 6 0 , 5 0 % ) ; S C S S d a r k e n ( # 6 c f 6 2 0 , 3 0 % ) ; S C S S a d j u s t - h u e ( # 7 7 a 7 f 9 , - 9 0 ) ; S C S S d e s a t u r a t e ( # d 9 a 6 2 1 , 5 0 % ) ; S C S S l i g h t e n ( # 2 e 7 8 0 5 , 5 0 % ) ; Sass and Compass Workshop - ©2014 Shaho Toofani
93. Colors — change-color: Set any property of a color S C S S c h a n g e - c o l o r ( $ c o l o r , [ $ r e d ] , [ $ g r e e n ] , [ $ b l u e ] , [ $ h u e ] , [ $ s a t u r a t i o n ] , [ $ l i g h t n e s s ] , S C S S c h a n g e - c o l o r ( # b a 5 6 3 7 , $ h u e : 6 0 ) ; S C S S c h a n g e - c o l o r ( # 8 e 9 c b 3 , $ s a t u r a t i o n : 1 0 0 ) ; S C S S c h a n g e - c o l o r ( # 6 c f 6 2 0 , $ g r e e n : 6 0 , $ b l u e : 1 0 0 ) ; Sass and Compass Workshop - ©2014 Shaho Toofani
94. Colors — adjust-color: Incrementally manipulate any property of a color S C S S a d j u s t - c o l o r ( $ c o l o r , [ $ r e d ] , [ $ g r e e n ] , [ $ b l u e ] , [ $ h u e ] , [ $ s a t u r a t i o n ] , [ $ l i g h t n e s s ] , S C S S a d j u s t - c o l o r ( # d 3 f a 7 b , $ h u e : 6 0 , $ l i g h t n e s s : - 2 0 % ) ; N O T E ! Last example produce: rgba(95, 255, 227, 0.75); S C S S a d j u s t - c o l o r ( # 5 f 8 f e 3 , $ g r e e n : 1 0 0 , $ a l p h a : - 0 . 2 5 ) ; Sass and Compass Workshop - ©2014 Shaho Toofani
95. Color online examples SassMe - Visualize SASS color functions in real-time without compiling How color works in Sass Flatt sassy butons Sass Button Generator Sass mixin for inner shadow Sass color function comparisons Sass and color manipulation on Codepen.io Read more: Mixins for semi-transparent colors Controlling color with Sass color functions How to programmatically go from one color to another in Sass Sass and Compass Workshop - ©2014 Shaho Toofani
96. MATH Sass and Compass Workshop - ©2014 Shaho Toofani
97. Math — Basic Arithmetic + addition - subtraction * multiplication / division % modulo = remainder from a division operation. 12 % 3 results in 0, while 12 % 5 returns 2. Math operators ( +, -, *, /, % ) work with numbers S C S S 1 e m + 1 e m ; / / 2 e m 1 e m - 1 e m ; / / 0 e m 1 i n + 7 2 p t ; / / 2 i n 6 p x * 4 ; / / 2 4 p x 1 8 % 5 ; / / 3 Sass and Compass Workshop - ©2014 Shaho Toofani
98. Math — Division a special case The trickiest of the number operations, due to font: S C S S f o n t : 1 8 p x / 1 . 4 5 e m ; / / 1 8 p x / 1 . 4 5 e m f o n t : ( 2 0 p x / 5 ) ; / / 4 p x f o n t : 2 0 p x / 5 + 1 ; / / 5 p x f o n t : $ b a s e / 5 ; / / 4 p x $ s i z e : 2 0 p x / 5 ; / / 4 p x w i d t h : 2 0 p x * 5 / 2 ; / / 5 0 p x Sass defaults to returning (up to) five digits after a decimal point. Sass and Compass Workshop - ©2014 Shaho Toofani
99. Math — String Addition Addition on strings concatenates them: S C S S $ f a m i l y : " H e l v e t i c a " + " N e u e " ; / / " H e l v e t i c a N e u e " Initial left-side string determines post-concatenation quotes: S C S S $ f a m i l y : ' s a n s - ' + s e r i f / / ' s a n s - s e r i f ' $ f a m i l y : s a n s - + ' s e r i f ' / / s a n s - s e r i f Sass and Compass Workshop - ©2014 Shaho Toofani
100. Math — Pre-Defined Math Utilities round($number) - round to closest whole number ceil($number) - round up floor($number) - round down abs($number) - absolute value min($list) - minimum list value max($list) - maximum list value percentage($number) - convert to percentage Number Functions S C S S p e r c e n t a g e ( 1 3 / 2 5 ) / / 5 2 % r o u n d ( 2 . 4 ) / / 2 c e i l ( 2 . 2 ) / / 3 f l o o r ( 2 . 6 ) / / 2 a b s ( - 2 4 ) / / 2 4 Sass and Compass Workshop - ©2014 Shaho Toofani
101. CONTROL DIRECTIVE Sass and Compass Workshop - ©2014 Shaho Toofani
102. Logic Operators — Comparison (Equality) operators The equality operators can be used on everything (strings of text and numbers). == means equal to != not equal to — Relational operators Sass allows the use of relational operators on numbers: > greater than >= greater than or equal to < less than <= less than or equal to Sass and Compass Workshop - ©2014 Shaho Toofani
103. Logic Operators Relational operators ( <, >, <=, >= ) evaluate numbers S C S S 1 < 2 0 / / t r u e 1 0 < = 2 0 / / t r u e 4 > 1 / / t r u e 4 > = 1 / / t r u e Comparison operators ( ==, != ) evaluate all data types S C S S 1 + 1 = = 2 / / t r u e s m a l l ! = b i g / / t r u e # 0 0 0 = = b l a c k / / t r u e w h i t e ! = # f f f / / f a l s e Sass and Compass Workshop - ©2014 Shaho Toofani
104. Control DIRECTIVE — @if statement Using @if, we can conditionally output code S C S S $ t h e m e : d a r k ; h e a d e r { @ i f $ t h e m e = = d a r k { b a c k g r o u n d : # 0 0 0 ; } } C S S h e a d e r { b a c k g r o u n d : # 0 0 0 ; } Sass and Compass Workshop - ©2014 Shaho Toofani
105. Control DIRECTIVE — The @if and @else if control directives @else provides a fallback if everything evaluates false or null S C S S $ t h e m e : l i g h t ; h e a d e r { @ i f $ t h e m e = = d a r k { b a c k g r o u n d : # 0 0 0 ; } @ e l s e { b a c k g r o u n d : # f f f ; } } C S S h e a d e r { b a c k g r o u n d : # f f f ; } Sass and Compass Workshop - ©2014 Shaho Toofani
106. Control DIRECTIVE — The @if and @else if control directives @else if allows for multiple comparisons: S C S S $ t h e m e : p i n k ; h e a d e r { @ i f $ t h e m e = = d a r k { b a c k g r o u n d : # 0 0 0 ; } @ e l s e { b a c k g r o u n d : # f f f ; } @ e l s e i f $ t h e m e = = p i n k { b a c k g r o u n d : p i n k ; } } C S S h e a d e r { b a c k g r o u n d : p i n k ; } Sass and Compass Workshop - ©2014 Shaho Toofani
107. Control DIRECTIVE — The Single-line if function if( condition, "true value", "false value" ) S C S S $ t h e m e : l i g h t ; h e a d e r { @ i f $ t h e m e = = d a r k { c o l o r : # 0 0 0 ; } @ e l s e { c o l o r : # f f f ; } } S C S S $ t h e m e : l i g h t ; h e a d e r { c o l o r : i f ( $ t h e m e = = d a r k , # 0 0 0 , # f f f ) } Sass and Compass Workshop - ©2014 Shaho Toofani
108. Control DIRECTIVE — The @for loop The @for directive repeatedly outputs a set of styles. A counter variable is just a placeholder for the current state of the loop; it increments with each iteration of the loop. S C S S @ f o r $ i f r o m 1 t o 6 { s p a n - # { $ i } { w i d t h : 2 0 p x + ( $ i * 2 0 p x ) ; } } C S S s p a n - 1 { w i d t h : 4 0 p x ; } s p a n - 2 { w i d t h : 6 0 p x ; } s p a n - 3 { w i d t h : 8 0 p x ; } s p a n - 4 { w i d t h : 1 0 0 p x ; } s p a n - 5 { w i d t h : 1 2 0 p x ; } So, where is the span-6?! Sass and Compass Workshop - ©2014 Shaho Toofani
109. Control DIRECTIVE — The @for loop S C S S @ f o r $ i f r o m 1 t h r o u g h 6 { s p a n - # { $ i } { w i d t h : 2 0 p x + ( $ i * 2 0 p x ) ; } } C S S s p a n - 1 { w i d t h : 4 0 p x ; } s p a n - 2 { w i d t h : 6 0 p x ; } s p a n - 3 { w i d t h : 8 0 p x ; } s p a n - 4 { w i d t h : 1 0 0 p x ; } s p a n - 5 { w i d t h : 1 2 0 p x ; } s p a n - 6 { w i d t h : 1 4 0 p x ; } Sass and Compass Workshop - ©2014 Shaho Toofani
110. Lists — Lists: A comma- or space-separated group of values Lists are just a series of other values, separated by either spaces or commas. S C S S $ c o l o r s : r e d , g r e e n , b l u e , y e l l o w ; $ m a r g i n : 4 0 p x 0 2 0 p x 1 0 0 p x ; $ i t e m s : " i t e m - 1 " " i t e m - 2 " " i t e m - 3 " ; $ i t e m s - c o m m a : " i t e m - 1 " , " i t e m - 2 " , " i t e m - 3 " ; $ m y - f o n t - f a c e : H e l v e t i c a , A r i a l , s a n s - s e r i f ; Read more: Understanding Sass lists Sass and Compass Workshop - ©2014 Shaho Toofani
111. Lists — Sass list functions length - number of items in a list: S C S S $ c o l o r s : r e d g r e e n b l u e y e l l o w ; $ s i z e : l e n g t h ( $ c o l o r s ) ; / / 4 append - adds a value to the end of a list: S C S S $ c o l o r s : r e d g r e e n b l u e y e l l o w ; $ a l l : a p p e n d ( $ c o l o r s , b l a c k ) ; / / r e d g r e e n b l u e y e l l o w b l a c k join - combines two lists together: S C S S $ c o l o s 1 : r e d g r e e n ; $ c o l o r s 2 : b l u e y e l l o w ; $ a l l : j o i n ( $ c o l o r s 1 , $ c o l o r s 2 ) / / r e d g r e e n b l u e y e l l o w Sass and Compass Workshop - ©2014 Shaho Toofani
112. Lists — Sass list functions (continued) index - returns a value's list position or false: S C S S $ c o l o r s : r e d g r e e n b l u e y e l l o w ; $ i : i n d e x ( $ c o l o r s , r e d ) ; / / 1 ( s t a r t s a t 1 n o t 0 ) $ i : i n d e x ( $ c o l o r s , b l a c k ) ; / / f a l s e nth - return the item at list position n: S C S S $ c o l o r s : r e d g r e e n b l u e y e l l o w ; $ i : n t h ( $ c o l o r s , 3 ) ; / / b l u e Sass and Compass Workshop - ©2014 Shaho Toofani
113. Lists — Sass list functions (continued) zip - combines lists in comma-separated pairs: S C S S $ c o l o r s : r e d b l u e ; $ s e n s e : w a r m c o l d ; $ a l l : z i p ( $ c o l o r s , $ s e n s e ) ; red warm blue cold Sass and Compass Workshop - ©2014 Shaho Toofani
114. Control DIRECTIVE — The @each loops The @each directive is useful to loop through a list of items. S C S S $ l o g o s : p u m a n i k e a d i d a s ; @ e a c h $ l o g o i n $ l o g o s { . # { $ l o g o } { b a c k g r o u n d : u r l ( # { $ l o g o } . j p g ) ; } } C S S . p u m a { b a c k g r o u n d : u r l ( p u m a . j p g ) ; } . n i k e { b a c k g r o u n d : u r l ( n i k e . j p g ) ; } . a d i d a s { b a c k g r o u n d : u r l ( a d i d a s . j p g ) ; } Sass and Compass Workshop - ©2014 Shaho Toofani
115. Control DIRECTIVE — The @while loop @while requires manually updating the index. S C S S $ l e v e l : 0 ; @ w h i l e $ l e v e l < 5 { . t a g - # { $ l e v e l + 1 } { f o n t - s i z e : . 7 e m + ( $ l e v e l * . 5 e m ) ; } $ l e v e l : $ l e v e l + 1 ; } C S S . t a g - 1 { f o n t - s i z e : 0 . 7 e m ; } . t a g - 2 { f o n t - s i z e : 1 . 2 e m ; } . t a g - 3 { f o n t - s i z e : 1 . 7 e m ; } . t a g - 4 { f o n t - s i z e : 2 . 2 e m ; } . t a g - 5 { f o n t - s i z e : 2 . 7 e m ; } Sass and Compass Workshop - ©2014 Shaho Toofani
116. Control DIRECTIVE — The @while loop S C S S $ i : 2 ; . g r i d { p o s i t i o n : r e l a t i v e ; d i s p l a y : b l o c k ; @ w h i l e $ i < = 6 { & . s p a n - # { $ i } { w i d t h : $ i * 3 0 p x ; f l o a t : l e f t ; } $ i : $ i + 2 ; } } C S S . g r i d { p o s i t i o n : r e l a t i v e ; d i s p l a y : b l o c k ; } . g r i d . s p a n - 2 { w i d t h : 6 0 p x ; f l o a t : l e f t ; } . g r i d . s p a n - 4 { w i d t h : 1 2 0 p x ; f l o a t : l e f t ; } . g r i d . s p a n - 6 { w i d t h : 1 8 0 p x ; f l o a t : l e f t ; } Sass and Compass Workshop - ©2014 Shaho Toofani
117. PARTIALS Importing the right way Sass and Compass Workshop - ©2014 Shaho Toofani
118. @import, The Legacy way master.css containes: C S S @ i m p o r t ' r e s e t . c s s ' ; @ i m p o r t ' b a s e . c s s ' ; @ i m p o r t ' l a y o u t . c s s ' ; @ i m p o r t ' t y p o g r a p h y . c s s ' ; . . Sass and Compass Workshop - ©2014 Shaho Toofani
119. Partials, Importing the right way Enter the @import rule, which Sass extends to allow the importing of multiple SCSS files, merging them into a single CSS file when compiled. A single CSS means fewer HTTP connections. Performance! Variables can be defined in their own file, then imported whenever needed. Imported SCSS files can contain project-agnostic mixins that can be shared and reused. Filename starts with an underscore, for example _mixins.scss Sass and Compass Workshop - ©2014 Shaho Toofani
120. Partials — Use @import to merge chunks of your SCSS into one file. OR S C S S @ i m p o r t " c o l o r s . s c s s " ; @ i m p o r t " m i x i n s . s c s s " ; @ i m p o r t " g r i d . s c s s " ; S C S S @ i m p o r t " c o l o r s " ; @ i m p o r t " m i x i n s " ; @ i m p o r t " g r i d " ; Sass and Compass Workshop - ©2014 Shaho Toofani
121. Partials — Separate partials for: and grids, typography, colors, forms, tables mixins & variables different post types for blogs media queries site sub-sections reset normalize On compile, Sass will import the partials and output the relevant CSS where they are placed. Sass and Compass Workshop - ©2014 Shaho Toofani
122. Media Query @media directives in Sass behave just like they do in plain CSS, with one extra capabilities. Sass and Compass Workshop - ©2014 Shaho Toofani
123. Media Query — CSS Media Query One of the foundations of building responsive websites is the CSS media query. The ability to “listen” to the browser’s viewport for varying dimensions and then apply certain styles based on those dimensions is the cornerstone of creating flexible layouts that adapt to different devices. C S S . s i d e b a r { f l o a t : r i g h t ; w i d t h : 3 0 0 p x ; } @ 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 ) { . s i d e b a r { f l o a t : n o n e ; w i d t h : 1 0 0 % ; } } Sass and Compass Workshop - ©2014 Shaho Toofani
124. Media Query — Responsive Web Design in Sass — @media Directive C S S . s i d e b a r { f l o a t : r i g h t ; w i d t h : 3 0 0 p x ; } @ 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 ) { . s i d e b a r { f l o a t : n o n e ; w i d t h : 1 0 0 % ; } } S C S S . s i d e b a r { f l o a t : r i g h t ; w i d t h : 3 0 0 p x ; @ 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 l o a t : n o n e ; w i d t h : 1 0 0 % ; } } begin with @media write media queries as normal if it appears within a rule, it will ‘bubble up’ and put the selectors within the rule. media queries can be nested combined with the and rule Sass and Compass Workshop - ©2014 Shaho Toofani
125. Media Query — Nested Media Queries In Sass, you can nest media queries inside the original declaration, and they will “bubble up” into their own separate declarations when the stylesheet is compiled. S C S S s e c t i o n . m a i n { f l o a t : l e f t ; w i d t h : 6 5 % ; f o n t - s i z e : 1 6 p x ; l i n e - h e i g h t : 1 . 4 ; @ m e d i a s c r e e n a n d ( m a x - w i d t h : 8 0 0 p x ) { f l o a t : n o n e ; w i d t h : a u t o ; } @ m e d i a s c r e e n a n d ( m a x - w i d t h : 5 0 0 p x ) { f o n t - s i z e : 1 2 p x ; l i n e - h e i g h t : 1 . 4 ; } } Sass and Compass Workshop - ©2014 Shaho Toofani
126. Media Query Nesting media queries avoids rewriting the selector (section.main in this example) each time you’d like to make adjustments for various breakpoints. C S S s e c t i o n . m a i n { f l o a t : l e f t ; w i d t h : 6 5 % ; f o n t - s i z e : 1 6 p x ; l i n e - h e i g h t : 1 . 4 ; } @ m e d i a s c r e e n a n d ( m a x - w i d t h : 8 0 0 p x ) { s e c t i o n . m a i n { f l o a t : n o n e ; w i d t h : a u t o ; } } @ m e d i a s c r e e n a n d ( m a x - w i d t h : 5 0 0 p x ) { s e c t i o n . m a i n { f o n t - s i z e : 1 2 p x ; l i n e - h e i g h t : 1 . 4 ; } } Sass and Compass Workshop - ©2014 Shaho Toofani
127. Media Query — Using variables to define breakpoints S C S S $ w i d t h - s m a l l : 5 0 0 p x ; $ w i d t h - m e d i u m : 8 0 0 p x ; $ w i d t h - l a r g e : 1 2 0 0 p x ; s e c t i o n . m a i n { f o n t - s i z e : 1 6 p x ; l i n e - h e i g h t : 1 . 4 ; @ m e d i a s c r e e n a n d ( m a x - w i d t h : $ w i d t h - l a r g e ) { f l o a t : l e f t ; w i d t h : 6 5 % ; } @ m e d i a s c r e e n a n d ( m a x - w i d t h : $ w i d t h - m e d i u m ) { f l o a t : n o n e ; w i d t h : a u t o ; } @ m e d i a s c r e e n a n d ( m a x - w i d t h : $ w i d t h - s m a l l ) { f o n t - s i z e : 1 2 p x ; l i n e - h e i g h t : 1 . 4 ; } } Sass and Compass Workshop - ©2014 Shaho Toofani
128. Media Query Output: C S S s e c t i o n . m a i n { f o n t - s i z e : 1 6 p x ; l i n e - h e i g h t : 1 . 4 ; } @ m e d i a s c r e e n a n d ( m a x - w i d t h : 1 2 0 0 p x ) { s e c t i o n . m a i n { f l o a t : l e f t ; w i d t h : 6 5 % ; } } @ m e d i a s c r e e n a n d ( m a x - w i d t h : 8 0 0 p x ) { s e c t i o n . m a i n { f l o a t : n o n e ; w i d t h : a u t o ; } } @ m e d i a s c r e e n a n d ( m a x - w i d t h : 5 0 0 p x ) { s e c t i o n . m a i n { f o n t - s i z e : 1 2 p x ; l i n e - h e i g h t : 1 . 4 ; } } Sass and Compass Workshop - ©2014 Shaho Toofani
129. Media Query Going a step further, you can also define an entire media query as a variable: S C S S $ m o b i l e - f i r s t : " s c r e e n a n d ( m i n - w i d t h : 3 0 0 p x ) " ; @ m e d i a # { $ m o b i l e - f i r s t } { . c o n t e n t { f o n t - s i z e : 1 4 p x ; l i n e - h e i g h t : 1 . 5 ; } } C S S @ m e d i a s c r e e n a n d ( m i n - w i d t h : 3 0 0 p x ) { . c o n t e n t { f o n t - s i z e : 1 4 p x ; l i n e - h e i g h t : 1 . 5 ; } } Sass and Compass Workshop - ©2014 Shaho Toofani
130. Media Query — Combining @content blocks and mixins By using Sass’s @content directive, you can pass entire blocks of styles to a mixin, and Sass will place those blocks back into the declaration that calls the mixin. S C S S $ w i d t h - s m a l l : 4 0 0 p x ; $ w i d t h - m e d i u m : 7 6 0 p x ; $ w i d t h - l a r g e : 1 2 0 0 p x ; @ m i x i n r e s p o n s i v e ( $ w i d t h ) { @ i f $ w i d t h = = w i d e - s c r e e n s { @ m e d i a o n l y s c r e e n a n d ( m a x - w i d t h : $ w i d t h - l a r g e ) { @ c o n t e n t ; } } @ e l s e i f $ w i d t h = = m e d i u m - s c r e e n s { @ m e d i a o n l y s c r e e n a n d ( m a x - w i d t h : $ w i d t h - m e d i u m ) { @ c o n t e n t ; } } @ e l s e i f $ w i d t h = = s m a l l - s c r e e n s { @ m e d i a o n l y s c r e e n a n d ( m a x - w i d t h : $ w i d t h - s m a l l ) { @ c o n t e n t ; } } } Sass and Compass Workshop - ©2014 Shaho Toofani
131. Media Query @content - pass a block of properties to a mixin S C S S . l e f t s i d e { f l o a t : l e f t ; w i d t h : 7 0 % ; @ i n c l u d e r e s p o n s i v e ( w i d e - s c r e e n s ) { w i d t h : 8 0 % ; } @ i n c l u d e r e s p o n s i v e ( m e d i u m - s c r e e n s ) { w i d t h : 5 0 % ; f o n t - s i z e : 1 4 p x ; } @ i n c l u d e r e s p o n s i v e ( s m a l l - s c r e e n s ) { f l o a t : n o n e ; w i d t h : 1 0 0 % ; f o n t - s i z e : 1 2 p x ; } } Sass and Compass Workshop - ©2014 Shaho Toofani
132. Media Query Will output: C S S . l e f t s i d e { f l o a t : l e f t ; w i d t h : 7 0 % ; } @ m e d i a o n l y s c r e e n a n d ( m a x - w i d t h : 1 2 0 0 p x ) { . l e f t s i d e { w i d t h : 8 0 % ; } } @ m e d i a o n l y s c r e e n a n d ( m a x - w i d t h : 7 6 0 p x ) { . l e f t s i d e { w i d t h : 5 0 % ; f o n t - s i z e : 1 4 p x ; } } @ m e d i a o n l y s c r e e n a n d ( m a x - w i d t h : 4 0 0 p x ) { . l e f t s i d e { f l o a t : n o n e ; w i d t h : 1 0 0 % ; f o n t - s i z e : 1 2 p x ; } } Sass and Compass Workshop - ©2014 Shaho Toofani
133. Media Query and ... S C S S h 1 { f o n t - s i z e : 4 0 p x ; @ i n c l u d e r e s p o n s i v e ( w i d e - s c r e e n s ) { f o n t - s i z e : 4 8 p x ; } @ i n c l u d e r e s p o n s i v e ( m e d i u m - s c r e e n s ) { f o n t - s i z e : 3 2 p x ; } @ i n c l u d e r e s p o n s i v e ( s m a l l - s c r e e n s ) { f o n t - s i z e : 2 0 p x ; } } C S S h 1 { f o n t - s i z e : 4 0 p x ; } @ m e d i a o n l y s c r e e n a n d ( m a x - w i d t h : 1 2 0 0 p x ) { h 1 { f o n t - s i z e : 4 8 p x ; } } @ m e d i a o n l y s c r e e n a n d ( m a x - w i d t h : 7 6 0 p x ) { h 1 { f o n t - s i z e : 3 2 p x ; } } @ m e d i a o n l y s c r e e n a n d ( m a x - w i d t h : 4 0 0 p x ) { h 1 { f o n t - s i z e : 2 0 p x ; } } Sass and Compass Workshop - ©2014 Shaho Toofani
134. Media Query — Media Query Retrofitting S C S S . s i d e b a r { b o r d e r : 1 p x s o l i d # c c c ; @ m e d i a ( m i n - w i d t h : 7 0 0 p x ) { f l o a t : r i g h t ; w i d t h : 3 0 % ; } } C S S . s i d e b a r { b o r d e r : 1 p x s o l i d # c c c ; } @ m e d i a ( m i n - w i d t h : 7 0 0 p x ) { . s i d e b a r { f l o a t : r i g h t ; w i d t h : 3 0 % ; } } Sass and Compass Workshop - ©2014 Shaho Toofani
135. Media Query — Media Query Retrofitting S C S S @ m i x i n r e s p o n d - t o { @ m e d i a ( m i n - w i d t h : 7 0 0 p x ) { @ c o n t e n t } } . s i d e b a r { b o r d e r : 1 p x s o l i d # c c c ; @ i n c l u d e r e s p o n d - t o { f l o a t : r i g h t ; w i d t h : 3 0 % ; } } C S S . s i d e b a r { b o r d e r : 1 p x s o l i d # c c c ; } @ m e d i a ( m i n - w i d t h : 7 0 0 p x ) { . s i d e b a r { f l o a t : r i g h t ; w i d t h : 3 0 % ; } } Sass and Compass Workshop - ©2014 Shaho Toofani
136. Media Query — Media Query Retrofitting S C S S @ m i x i n r e s p o n d - t o ( $ m e d i a ) { @ i f $ m e d i a = = t a b l e t { @ m e d i a ( m i n - w i d t h : 7 0 0 p x ) { @ c o n t e n t } } } . s i d e b a r { b o r d e r : 1 p x s o l i d # c c c ; @ i n c l u d e r e s p o n d - t o ( t a b l e t ) { f l o a t : r i g h t ; w i d t h : 3 0 % ; } } C S S . s i d e b a r { b o r d e r : 1 p x s o l i d # c c c ; } @ m e d i a ( m i n - w i d t h : 7 0 0 p x ) { . s i d e b a r { f l o a t : r i g h t ; w i d t h : 3 0 % ; } } Sass and Compass Workshop - ©2014 Shaho Toofani
137. Media Query — Media Query Retrofitting S C S S @ m i x i n r e s p o n d - t o ( $ q u e r y ) { @ m e d i a ( m i n - w i d t h : $ q u e r y ) { @ c o n t e n t } } . s i d e b a r { b o r d e r : 1 p x s o l i d # c c c ; @ i n c l u d e r e s p o n d - t o ( 9 0 0 p x ) { f l o a t : r i g h t ; w i d t h : 3 0 % ; } } C S S . s i d e b a r { b o r d e r : 1 p x s o l i d # c c c ; } @ m e d i a ( m i n - w i d t h : 9 0 0 p x ) { . s i d e b a r { f l o a t : r i g h t ; w i d t h : 3 0 % ; } } Sass and Compass Workshop - ©2014 Shaho Toofani
138. Media Query — General Respond-To Mixin S C S S @ m i x i n r e s p o n d - t o ( $ v a l u e , $ q u e r y ) { @ m e d i a ( $ v a l u e : $ q u e r y ) { @ c o n t e n t } } . s i d e b a r { b o r d e r : 1 p x s o l i d # c c c ; @ i n c l u d e r e s p o n d - t o ( m a x - w i d t h , 6 0 0 p x ) { f l o a t : r i g h t ; w i d t h : 3 0 % ; } } C S S . s i d e b a r { b o r d e r : 1 p x s o l i d # c c c ; } @ m e d i a ( m i n - w i d t h : 6 0 0 p x ) { . s i d e b a r { f l o a t : r i g h t ; w i d t h : 3 0 % ; } } Sass and Compass Workshop - ©2014 Shaho Toofani
139. COMPASS Compass is an open-source CSS Authoring Framework. Sass and Compass Workshop - ©2014 Shaho Toofani
140. WHAT IS Compass? — Compass is an open-source CSS Authoring Framework. Looks like an extension to Sass Compass was the first Sass-based framework We get access to lots and lots of reusable patterns and tools for easily creating CSS Compass lets you write CSS3 goodies like box-shadow, gradients and ... with a single syntax It magically creates cross-browser compatible CSS of everything It provides Mixins, helpers, New Functions, reset and more Sass and Compass Workshop - ©2014 Shaho Toofani
141. WHAT IS Compass? — Official Website: http://compass-style.org — GitHub development homepage: https://github.com/chriseppstein/compass Sass and Compass Workshop - ©2014 Shaho Toofani
142. INSTALLING COMPASS — Command prompt(line) install r u b y g e m i n s t a l l c o m p a s s You’ve just installed Compass. Double-check: r u b y F e t c h i n g : c o m p a s s - 0 . 1 2 . 2 . g e m ( 1 0 0 % ) S u c c e s s f u l l y i n s t a l l e d c o m p a s s - 0 . 1 2 . 2 1 g e m i n s t a l l e d I n s t a l l i n g r i d o c u m e n t a t i o n f o r c o m p a s s - 0 . 1 2 . 2 . . . I n s t a l l i n g R D o c d o c u m e n t a t i o n f o r c o m p a s s - 0 . 1 2 . 2 . . . r u b y c o m p a s s - v It should return: r u b y C o m p a s s 0 . 1 2 . 2 ( A l n i l a m ) Sass and Compass Workshop - ©2014 Shaho Toofani
143. Useful Commands — Check which versions of Compass are available r u b y g e m l i s t c o m p a s s – a – r — Installing the latest pre-release version r u b y g e m i n s t a l l c o m p a s s - - p r e — Uninstall a specific version of Compass versionnumber is the release you want to remove (for example, 0.12.2). r u b y g e m u n i n s t a l l c o m p a s s - - v e r s i o n v e r s i o n n u m b e r Sass and Compass Workshop - ©2014 Shaho Toofani
144. Create a Sass and Compass project — Compass's built-in create command to make a project in the folder specified r u b y c o m p a s s c r e a t e n e w - p r o j e c t — Or just run following inside a folder r u b y c o m p a s s c r e a t e — Set up an existing project with compass - ( ) more r u b y c o m p a s s i n s t a l l c o m p a s s — Automatic compile to CSS from the Command Line r u b y c o m p a s s w a t c h Sass and Compass Workshop - ©2014 Shaho Toofani
145. Default Workflow in Compass — What are the generated files in a Compass project for? .sass-cache: This folder will contain the cache files that Sass uses to build your CSS files faster. You don't need to do anything with it. sass: This folder will store the Sass files that will be written or amended. This folder can be called anything, but 'sass' is the default name. stylesheets: This folder will contain the compiled CSS files that Sass will generate. It can be called anything, but stylesheets is the default folder name in Compass projects. config.rb: This file contains the configuration defaults for a project, what the various folders are called, and where they are located. It also controls the compression style of the generated CSS. Sass and Compass Workshop - ©2014 Shaho Toofani
146. Customizing Compass project — Create a customized Compass project r u b y c o m p a s s c r e a t e - - s a s s - d i r " s a s s " - - c s s - d i r " c s s " - - j a v a s c r i p t s - d i r " j s " - - i m a g e s - d i r — Creating a bare Compass project r u b y c o m p a s s c r e a t e - - b a r e - - s a s s - d i r " s a s s " - - c s s - d i r " c s s " - - j a v a s c r i p t s - d i r " j s " - - i m a g e s - d i r " i m g " Sass and Compass Workshop - ©2014 Shaho Toofani
147. Understanding the config.rb file The config.rb file is the brain of a Compass project. It defines the relationship between files and their assets, how and where the CSS should be generated, and any dependencies for a project. r u b y h t t p _ p a t h = " / " c s s _ d i r = " s t y l e s h e e t s " s a s s _ d i r = " s a s s " i m a g e s _ d i r = " i m a g e s " j a v a s c r i p t s _ d i r = " j a v a s c r i p t s " o u t p u t _ s t y l e = : c o m p r e s s e d f o n t s _ d i r = " f o n t s " N O T E ! Clean .sass-cache folder via Compass: r u b y c o m p a s s c l e a n Sass and Compass Workshop - ©2014 Shaho Toofani
148. Importing Compass Compass comprises five main modules: utilities typography css3 layout reset — Importing Once installed, use @import to make Compass available: S C S S @ i m p o r t " c o m p a s s " ; / / u t i l i t i e s , t y p o g r a p h y , c s s 3 @ i m p o r t " c o m p a s s / l a y o u t " ; Sass and Compass Workshop - ©2014 Shaho Toofani
149. Importing Reset Adds a set of rules based on after compiling: Eric Meyer's reset S C S S @ i m p o r t " c o m p a s s / r e s e t " ; Avoid if you plan on using Normalize.css Sass and Compass Workshop - ©2014 Shaho Toofani
150. Compass Mixins — Example with CSS3 Mixins S C S S @ i m p o r t " c o m p a s s " ; . m e s s a g e { @ i n c l u d e b a c k g r o u n d ( l i n e a r - g r a d i e n t ( # 9 b 9 5 9 2 , # 3 c 3 7 3 3 ) ) ; @ i n c l u d e b o r d e r - r a d i u s ( 5 p x ) ; } C S S . m e s s a g e { b a c k g r o u n d : - w e b k i t - l i n e a r - g r a d i e n t ( # 9 b 9 5 9 2 , # 3 c 3 7 3 3 ) ; b a c k g r o u n d : - m o z - l i n e a r - g r a d i e n t ( # 9 b 9 5 9 2 , # 3 c 3 7 3 3 ) ; b a c k g r o u n d : - m s - l i n e a r - g r a d i e n t ( # 9 b 9 5 9 2 , # 3 c 3 7 3 3 ) ; b a c k g r o u n d : l i n e a r - g r a d i e n t ( # 9 b 9 5 9 2 , # 3 c 3 7 3 3 ) ; - m o z - b o r d e r - r a d i u s : 5 p x ; - w e b k i t - b o r d e r - r a d i u s : 5 p x ; - m s - b o r d e r - r a d i u s : 5 p x ; b o r d e r - r a d i u s : 5 p x ; } Sass and Compass Workshop - ©2014 Shaho Toofani
151. Compass Mixins — Radial Gradient Mixin S C S S @ i m p o r t " c o m p a s s " ; . m e s s a g e { @ i n c l u d e b a c k g r o u n d ( r a d i a l - g r a d i e n t ( c e n t e r , # 9 b 9 5 9 2 , # 3 c 3 7 3 3 ) ) ; } C S S . m e s s a g e { b a c k g r o u n d : - w e b k i t - g r a d i e n t ( r a d i a l , 5 0 % , 0 , 5 0 % , 1 0 0 , c o l o r - s t o p ( 0 % , # 9 b 9 5 9 2 ) , c o l o r - s t o p ( 1 0 0 % , # 3 c 3 7 3 3 ) ) ; b a c k g r o u n d : - w e b k i t - r a d i a l - g r a d i e n t ( c e n t e r , # 9 b 9 5 9 2 , # 3 c 3 7 3 3 ) ; b a c k g r o u n d : - m o z - r a d i a l - g r a d i e n t ( c e n t e r , # 9 b 9 5 9 2 , # 3 c 3 7 3 3 ) ; b a c k g r o u n d : - o - r a d i a l - g r a d i e n t ( c e n t e r , # 9 b 9 5 9 2 , # 3 c 3 7 3 3 ) ; b a c k g r o u n d : r a d i a l - g r a d i e n t ( c e n t e r , # 9 b 9 5 9 2 , # 3 c 3 7 3 3 ) ; } Sass and Compass Workshop - ©2014 Shaho Toofani
152. Compass Mixins More robust color stops are also supported: S C S S @ i m p o r t " c o m p a s s " ; . m e s s a g e { @ i n c l u d e b a c k g r o u n d ( l i n e a r - g r a d i e n t ( t o p , # 9 b 9 5 9 2 , # e 7 9 e 2 3 7 5 % , # 3 c 3 7 3 3 ) ) ; } C S S . m e s s a g e { b a c k g r o u n d : - w e b k i t - g r a d i e n t ( l i n e a r , 5 0 % 0 % , 5 0 % 1 0 0 % , c o l o r - s t o p ( 0 % , # 9 b 9 5 9 2 ) , c o l o r - s t o p ( 7 5 % , # e 7 9 e 2 3 ) , c o l o r - s t o p ( 1 0 0 % , # 3 c 3 7 3 3 ) ) ; b a c k g r o u n d : - w e b k i t - l i n e a r - g r a d i e n t ( t o p , # 9 b 9 5 9 2 , # e 7 9 e 2 3 7 5 % , # 3 c 3 7 3 3 ) ; b a c k g r o u n d : - m o z - l i n e a r - g r a d i e n t ( t o p , # 9 b 9 5 9 2 , # e 7 9 e 2 3 7 5 % , # 3 c 3 7 3 3 ) ; b a c k g r o u n d : - o - l i n e a r - g r a d i e n t ( t o p , # 9 b 9 5 9 2 , # e 7 9 e 2 3 7 5 % , # 3 c 3 7 3 3 ) ; b a c k g r o u n d : l i n e a r - g r a d i e n t ( t o p , # 9 b 9 5 9 2 , # e 7 9 e 2 3 7 5 % , # 3 c 3 7 3 3 ) ; } Sass and Compass Workshop - ©2014 Shaho Toofani
153. Compass Mixins — Text shadow with default values S C S S @ i m p o r t " c o m p a s s " ; $ d e f a u l t - t e x t - s h a d o w - c o l o r : # c c c ; $ d e f a u l t - t e x t - s h a d o w - b l u r : 0 ; $ d e f a u l t - t e x t - s h a d o w - h - o f f s e t : 3 p x ; $ d e f a u l t - t e x t - s h a d o w - v - o f f s e t : 4 p x ; S C S S . h e a d l i n e { @ i n c l u d e t e x t - s h a d o w ; } C S S . h e a d l i n e { t e x t - s h a d o w : 3 p x 4 p x 0 # c c c c c c ; } More... Sass and Compass Workshop - ©2014 Shaho Toofani
154. Compass Mixins — Multiple columns S C S S @ i m p o r t " c o m p a s s " ; p . t h r e e - c o l s { @ i n c l u d e c o l u m n - c o u n t ( 4 ) ; @ i n c l u d e c o l u m n - g a p ( 1 0 0 p x ) ; @ i n c l u d e c o l u m n - r u l e ( 1 p x , d o t t e d , l i g h t e n ( b l u e , 1 4 % ) ) ; } C S S p . t h r e e - c o l s { - m o z - c o l u m n - c o u n t : 4 ; - w e b k i t - c o l u m n - c o u n t : 4 ; c o l u m n - c o u n t : 4 ; - m o z - c o l u m n - g a p : 1 0 0 p x ; - w e b k i t - c o l u m n - g a p : 1 0 0 p x ; c o l u m n - g a p : 1 0 0 p x ; - m o z - c o l u m n - r u l e : 1 p x d o t t e d # 4 7 4 7 f f ; - w e b k i t - c o l u m n - r u l e : 1 p x d o t t e d # 4 7 4 7 f f ; c o l u m n - r u l e : 1 p x d o t t e d # 4 7 4 7 f f ; } Sass and Compass Workshop - ©2014 Shaho Toofani
155. Compass mixins — Clearfix, different approaches S C S S @ i m p o r t " c o m p a s s " ; . b o x { @ i n c l u d e c l e a r f i x ; } C S S . b o x { o v e r f l o w : h i d d e n ; * z o o m : 1 ; } S C S S @ i m p o r t " c o m p a s s " ; . o t h e r - b o x { @ i n c l u d e p i e - c l e a r f i x ; } C S S . o t h e r - b o x { * z o o m : 1 ; } . o t h e r - b o x : a f t e r { c o n t e n t : " " ; d i s p l a y : t a b l e ; c l e a r : b o t h ; } Micro clearfix hack Sass and Compass Workshop - ©2014 Shaho Toofani
156. Compass's text replacement mixins — The hide-text mixin S C S S @ i m p o r t " c o m p a s s " ; . h i d e m e { @ i n c l u d e h i d e - t e x t ; } C S S . h i d e m e { t e x t - i n d e n t : - 1 1 9 9 8 8 p x ; o v e r f l o w : h i d d e n ; t e x t - a l i g n : l e f t ; } Sass and Compass Workshop - ©2014 Shaho Toofani
157. Compass's text replacement mixins — The squish-text mixin squish-text is to squish text inline if you want it to be visually hidden but still accessible to screen readers. S C S S @ i m p o r t " c o m p a s s " ; . i r { @ i n c l u d e s q u i s h - t e x t ; } C S S . i r { f o n t : 0 / 0 s e r i f ; t e x t - s h a d o w : n o n e ; c o l o r : t r a n s p a r e n t ; } Sass and Compass Workshop - ©2014 Shaho Toofani
158. Compass mixins — General utilities Browser Hacks Clearfxes Resets — Element styles Links Lists Float Tables Text — CSS3 gradients background-size border-radius box-shadow box-sizing CSS3 PIE font-face opacity transform transition more... Sass and Compass Workshop - ©2014 Shaho Toofani
159. Enable relative assets r u b y # T o e n a b l e r e l a t i v e p a t h s t o a s s e t s v i a c o m p a s s h e l p e r f u n c t i o n s . U n c o m m e n t : r e l a t i v e _ a s s e t s = t r u e This setting (not enabled by default so just uncomment it) allows Compass helpers to know that if an image is specified (for example), it knows where to find it relative to the CSS — For example C S S b a c k g r o u n d - i m a g e : u r l ( ' . . / i m g / i m a g e . j p g ' ) ; — Do: S C S S b a c k g r o u n d - i m a g e : i m a g e - u r l ( ' i m a g e . j p g ' ) ; Sass and Compass Workshop - ©2014 Shaho Toofani
160. Compass Helper functions — Example with helper functions S C S S @ i m p o r t " c o m p a s s " ; h e a d e r { b a c k g r o u n d : i m a g e - u r l ( ' h e a d e r - b g . p n g ' ) ; h 1 { w i d t h : i m a g e - w i d t h ( ' l o g o . p n g ' ) ; h e i g h t : i m a g e - h e i g h t ( ' l o g o . p n g ' ) ; b a c k g r o u n d : i n l i n e - i m a g e ( ' l o g o . p n g ' ) } } C S S h e a d e r { b a c k g r o u n d : u r l ( ' / i m a g e s / h e a d e r - b g . p n g ? 1 3 5 1 … ' ) ; } h e a d e r h 1 { w i d t h : 2 2 0 p x ; h e i g h t : 1 0 0 p x ; b a c k g r o u n d : u r l ( ' d a t a : i m a g e / p n g ; b a s e 6 4 . . . ' ) ; } Sass and Compass Workshop - ©2014 Shaho Toofani
161. The Compass cache buster N O T E ! The Compass cache buster; it prevents browsers caching assets when they have changed (the value changes each time the image's modification time changes). C S S b a c k g r o u n d - i m a g e : u r l ( ' . . / i m g / l o g o - s m a l l . p n g ? 1 3 5 7 5 9 8 8 0 1 ' ) ; To disable it on a case-by-case basis you can do this: S C S S b a c k g r o u n d - i m a g e : i m a g e - u r l ( " l o g o - s m a l l . p n g " , f a l s e ) ; To disable it globally, read more ... Sass and Compass Workshop - ©2014 Shaho Toofani
162. Compass Helper functions — Opposite Position Returns the opposite side (or pair): S C S S @ i m p o r t " c o m p a s s " ; $ o p p o s i t e : o p p o s i t e - p o s i t i o n ( t o p ) ; / / b o t t o m $ o p p o s i t e : o p p o s i t e - p o s i t i o n ( l e f t ) ; / / r i g h t $ o p p o s i t e : o p p o s i t e - p o s i t i o n ( r i g h t b o t t o m ) ; / / l e f t t o p Sass and Compass Workshop - ©2014 Shaho Toofani
163. Compass Helper functions — Using opposite-position - CSS shapes: C S S . a r r o w { b o r d e r : 5 0 p x s o l i d t r a n s p a r e n t ; b o r d e r - b o t t o m : 5 0 p x s o l i d # f f 4 1 3 6 ; b o r d e r - t o p : 0 ; h e i g h t : 0 ; w i d t h : 0 ; } CSS Triangle S C S S @ i m p o r t " c o m p a s s " ; @ m i x i n a r r o w ( $ p o i n t ) { $ o p p o s i t e : o p p o s i t e - p o s i t i o n ( $ p o i n t ) ; b o r d e r : 5 0 p x s o l i d t r a n s p a r e n t ; b o r d e r - # { $ o p p o s i t e } : 5 0 p x s o l i d # f f 4 1 3 6 ; b o r d e r - # { p o i n t } : 0 ; h e i g h t : 0 ; w i d t h : 0 ; } . a r r o w { @ i n c l u d e a r r o w ( t o p ) ; } Sass and Compass Workshop - ©2014 Shaho Toofani
164. Compass Helper functions image-url image-height image-width inline-image font-url pi sin cos tan adjust-lightness, scale-lightness adjust-saturation, scale-saturation more... Sass and Compass Workshop - ©2014 Shaho Toofani
165. Compass image sprites — Spriting with Compass Generates the sprite map & the CSS Easy to configure classes, spacing, etc Add a new image? updates automatically S C S S @ i m p o r t " c o m p a s s " ; @ i m p o r t " m y - i c o n s / * . p n g " ; @ i n c l u d e a l l - m y - i c o n s - s p r i t e s ; C S S . m y - i c o n s - s p r i t e , . m y - i c o n s - d e l e t e , . m y - i c o n s - e d i t , . m y - i c o n s - n e w , . m y - i c o n s - s a v e { b a c k g r o u n d : u r l ( ' / i m a g e s / m y - i c o n s - s 3 4 f e 0 6 0 4 a b . p n g ' ) n o - r e p e a t ; } . m y - i c o n s - d e l e t e { b a c k g r o u n d - p o s i t i o n : 0 0 ; } . m y - i c o n s - e d i t { b a c k g r o u n d - p o s i t i o n : 0 - 3 2 p x ; } . m y - i c o n s - n e w { b a c k g r o u n d - p o s i t i o n : 0 - 6 4 p x ; } . m y - i c o n s - s a v e { b a c k g r o u n d - p o s i t i o n : 0 - 9 6 p x ; } Sass and Compass Workshop - ©2014 Shaho Toofani
166. Additional sprite configuration options — Add the height and width to each generated HTML selector S C S S $ m y - i c o n s - s p r i t e - d i m e n s i o n s : t r u e ; C S S . m y - i c o n s - s a v e { b a c k g r o u n d - p o s i t i o n : 0 - 9 6 p x ; h e i g h t : 3 2 p x ; w i d t h : 3 2 p x ; } — Extra padding around the images S C S S $ m y - i c o n s - s p a c i n g : 1 0 p x ; Spriting with Compass, Read more ... Sass and Compass Workshop - ©2014 Shaho Toofani
167. Creating data URIs from images — The inline-image syntax S C S S @ i m p o r t " c o m p a s s " ; . l o g o { b a c k g r o u n d - i m a g e : i n l i n e - i m a g e ( " s v g / l o g o . s v g " ) ; } — CSS generated by that rule (truncated for brevity) C S S . l o g o { b a c k g r o u n d - i m a g e : u r l ( ' d a t a : i m a g e / s v g + x m l ; b a s e 6 4 , P D 9 4 b W w g d m V y c 2 l v b j 0 i M S 4 w I i B l b m N . . . — Easy fallbacks for non-SVG capable devices S C S S . l o g o { b a c k g r o u n d - i m a g e : i n l i n e - i m a g e ( " s v g / l o g o . s v g " ) ; . n o - s v g & { b a c k g r o u n d - i m a g e : i m a g e - u r l ( " p n g / l o g o . p n g " ) ; } } Sass and Compass Workshop - ©2014 Shaho Toofani
168. Susy grid system The homepage for Susy is http://susy.oddbird.net/ — Installing the Susy Compass plugin r u b y g e m i n s t a l l s u s y r u b y F e t c h i n g : s u s y - 1 . 0 . 9 . g e m ( 1 0 0 % ) S u c c e s s f u l l y i n s t a l l e d s u s y - 1 . 0 . 9 1 g e m i n s t a l l e d — Including Susy in a project Open the config.rb file and enter the following line at the top: r u b y r e q u i r e " s u s y " Sass and Compass Workshop - ©2014 Shaho Toofani
169. 960.gs — Building 960.gs grid system from scratch with Sass Sass and Compass Workshop - ©2014 Shaho Toofani
170. Resources Manning: Sass and Compass in Action thesassway.com Sass for Web Designers Sass Style Guide Create a CSS grid using calc() Advanced SASS Mixins & Color Functions The Extend Concept Sass & Compass Color Functions Sass: Mixin or Placeholder? Understanding Sass lists Handy Advanced Sass Having fun with Sass lists and strings IE-friendly mobile-first CSS with Sass 3.2 Sass tag on hongkiat.com Sass and Compass Workshop - ©2014 Shaho Toofani
171. That's it By | Shaho Toofani @shaho By becoming web developers, you agreed on staying up to date with all the new cool stuff. Someone said! Sass and Compass Workshop - ©2014 Shaho Toofani