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. 3.
  2. 4.
  3. 6.
  4. 7.
  5. 8.
  6. 9.
  7. 11.
  8. 12.
  9. 13.
  10. 14.
  11. 16.
  12. 18.
  13. 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.
  14. 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  
  15. 21.
  16. 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  
  17. 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  
  18. 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  
  19. 25.

    utilities/_fonts.scss Web fonts imports & declarations 01.  Utilities   02.

     Libraries   03.  Base   04.  Layout   05.  Modules   06.  States   07.  @font-­‐face
  20. 26.

    states/_print.scss Print styles 01.  Utilities   02.  Libraries   03.

     Base   04.  Layout   05.  Modules   06.  States   07.  @font-­‐face   08.  Print  
  21. 28.
  22. 29.
  23. 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
  24. 34.
  25. 37.

    _config.scss $red : #E10E78; $dkgray : #413F35; $purple : #F68B21;

    $dkpurple : #663399; $dkgreen : #B3CB36; $gray : #332421; $blackish : #121212; $kindawhite : #f3f3f3;
  26. 38.

    _config.scss $red : #E10E78; $dkgray : #413F35; $purple : #F68B21;

    $dkpurple : #663399; $dkgreen : #B3CB36; $gray : #332421; $blackish : #121212; $kindawhite : #f3f3f3;
  27. 45.

    _config.scss $rubineRed : #E10E78; $charcoal : #413F35; $papaya : #F68B21;

    $kiwi : #B3CB36; $color-primary : $rubineRed; $color-secondary : $aqua; $color-success : $kiwi;
  28. 46.
  29. 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; } }
  30. 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; }}}
  31. 55.

    _config.scss .default .module { color: red; } .unilever .module {

    color: orange; } .lipton .test { color: yellow; } .epson .test { color: green; }
  32. 56.

    _config.scss .default .module { color: red; } .unilever .module {

    color: orange; } .lipton .test { color: yellow; } .epson .test { color: green; }