One Sass File, So Many Sites

6e7b68aa52dc1244b3dfd3db19e06af2?s=47 Mina Markham
November 06, 2014

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

6e7b68aa52dc1244b3dfd3db19e06af2?s=128

Mina Markham

November 06, 2014
Tweet

Transcript

  1. one file… so many sites

  2. @minamarkham

  3. @gdiDFW

  4. None
  5. I build a lot of sites.

  6. None
  7. None
  8. None
  9. None
  10. One site to rule them all

  11. None
  12. None
  13. None
  14. None
  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

  28. None
  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) {…} }