One Sass File, So Many Sites

We all know and love Sass. Responsiveness is a no brainer. And the new hotness of Sass 3.4 is, well, hot. But how does all this help to create white label sites? Maintaining CSS on multiple sites with multiple themes can really be quite a pain, especially when working with a team of developers.

Mina Markham will take you through her process of creating a Sass-based ecosystem that make theming sites a breeze. You’ll get to see Sass in all its pro glory, with some Compass, Grunt, and some fun frameworks.

This talk will include:

A breakdown of a SMACSS-based style architecture
Leveraging functions, mixins and maps to create themes
How to measure your improvements to showcase tangle results

Transcript

1. one file… so many sites
2. @minamarkham
3. @gdiDFW
5. I build a lot of sites.
10. One site to rule them all
15. Theming Automation Documentation
16. Theming
17. File Structure
18. @import
19. 01.  Utilities   @import  'global';   @import  'functions';   @import  'mixins';   @import  'helpers'; utilities/_index.scss Variables, mixins, functions, etc. Basically anything that doesn’t output CSS by itself.
20. @import  "lib/susy";   @import  "lib/font-­‐awesome";   @import  "lib/pesticide"; utilities/_lib.scss Third-party libraries such as Susy, Font Awesome, Pesticide, and other plugins. 01.  Utilities   02.  Libraries  
21. @import  ‘normalize';   @import  'base'; base/_index.scss CSS resets, Normalize, element styles 01.  Utilities   02.  Libraries   03.  Base  
22. @import  'header';   @import  'footer';   @import  'sidebar'; layout/_index.scss Grid styles, major layout components (e.g. header, footer, sidebar, etc) 01.  Utilities   02.  Libraries   03.  Base   04.  Layout  
23. @import  'btn';   @import  'table';   @import  'nav'; modules/_index.scss Individual modules, such as buttons, navigation, menus, etc. 01.  Utilities   02.  Libraries   03.  Base   04.  Layout   05.  Modules  
24. @import  'states';   @import  'touch'; states/_index.scss Describe states of being, ex: active, collapsed or hidden 01.  Utilities   02.  Libraries   03.  Base   04.  Layout   05.  Modules   06.  States  
25. utilities/_fonts.scss Web fonts imports & declarations 01.  Utilities   02.  Libraries   03.  Base   04.  Layout   05.  Modules   06.  States   07.  @font-­‐face
26. states/_print.scss Print styles 01.  Utilities   02.  Libraries   03.  Base   04.  Layout   05.  Modules   06.  States   07.  @font-­‐face   08.  Print  
27. !important
29. shame.css
30. _shame.scss
31. 01.  Utilities   02.  Libraries   03.  Base   04.  Layout   05.  Modules   06.  States   07.  @font-­‐face   08.  Print   09.  Shame _shame.scss because hacks happen
32. small and readable
33. mina.so/sassyStarter
34. Variables
35. Descriptive
36. _config.scss $red : #E10E78; $black : #413F35; $purple : #F68B21; $green : #B3CB36;
37. _config.scss $red : #E10E78; $dkgray : #413F35; $purple : #F68B21; $dkpurple : #663399; $dkgreen : #B3CB36; $gray : #332421; $blackish : #121212; $kindawhite : #f3f3f3;
38. _config.scss $red : #E10E78; $dkgray : #413F35; $purple : #F68B21; $dkpurple : #663399; $dkgreen : #B3CB36; $gray : #332421; $blackish : #121212; $kindawhite : #f3f3f3;
39. _config.scss $rubineRed : #E10E78; $charcoal : #413F35; $papaya : #F68B21; $kiwi : #B3CB36;
40. _config.scss $rubineRed : #E10E78; $charcoal : #413F35; $papaya : #F68B21; $kiwi : #B3CB36;
41. Functional
42. _config.scss $color-primary : #E10E78; $color-secondary : #00B3B5; $color-success : #B3CB36;
43. _config.scss $color-primary : #E10E78; $color-secondary : #00B3B5; $color-success : #B3CB36;
44. Descriptive + Functional http://sachagreif.com/sass-color-variables/
45. _config.scss $rubineRed : #E10E78; $charcoal : #413F35; $papaya : #F68B21; $kiwi : #B3CB36; $color-primary : $rubineRed; $color-secondary : $aqua; $color-success : $kiwi;
46. Methods
47. Solution 1: Separate classes
48. .theme-border {…} .theme-background {…} .theme-button {…}
49. .theme-border {…} .theme-background {…} .theme-button {…}
50. Solution 2: Maps & Functions http://www.zell-weekeat.com/organizing-multiple-theme-styles-with-sass/
51. _config.scss $themes: ( default : #444, unilever : #f1c40f, lipton : #c0392b, epson : #8e44ad );
52. _functions.scss @function map-fetch($map, $keys) { $key: nth($keys, 1); $length: length($keys); $value: map-get($map, $key); @if $value != null { @if $length > 1 { $rest: (); @for $i from 2 through $length { $rest: append($rest, nth($keys, $i)) } @return map-fetch($value, $rest); } @else { @return $value; } } @else { @return false; } }
53. _mixins.scss @mixin theme ($themes: $themes) { @each $theme, $map in $themes { .#{$theme} & { $theme-color: map-fetch($themes, $theme "color") !global; @content; $theme-color: null !global; }}}
54. _config.scss .module { @include theme() { color: $theme-color; }}
55. _config.scss .default .module { color: red; } .unilever .module { color: orange; } .lipton .test { color: yellow; } .epson .test { color: green; }
56. _config.scss .default .module { color: red; } .unilever .module { color: orange; } .lipton .test { color: yellow; } .epson .test { color: green; }
57. Solution 3: @mixins
58. @mixin theme($name) { @if $theme == $name { @content; } }
59. $theme: rebeccapurple
60. .module { @include theme($rebeccapurple) {…} }