Upgrade to Pro — share decks privately, control downloads, hide ads and more …

One Sass File, So Many Sites

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

Mina Markham

November 06, 2014
Tweet

More Decks by Mina Markham

Other Decks in Programming

Transcript

  1. 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.
  2. @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  
  3. @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  
  4. @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  
  5. @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  
  6. utilities/_fonts.scss Web fonts imports & declarations 01.  Utilities   02.

     Libraries   03.  Base   04.  Layout   05.  Modules   06.  States   07.  @font-­‐face
  7. states/_print.scss Print styles 01.  Utilities   02.  Libraries   03.

     Base   04.  Layout   05.  Modules   06.  States   07.  @font-­‐face   08.  Print  
  8. 01.  Utilities   02.  Libraries   03.  Base   04.

     Layout   05.  Modules   06.  States   07.  @font-­‐face   08.  Print   09.  Shame _shame.scss because hacks happen
  9. _config.scss $red : #E10E78; $dkgray : #413F35; $purple : #F68B21;

    $dkpurple : #663399; $dkgreen : #B3CB36; $gray : #332421; $blackish : #121212; $kindawhite : #f3f3f3;
  10. _config.scss $red : #E10E78; $dkgray : #413F35; $purple : #F68B21;

    $dkpurple : #663399; $dkgreen : #B3CB36; $gray : #332421; $blackish : #121212; $kindawhite : #f3f3f3;
  11. _config.scss $rubineRed : #E10E78; $charcoal : #413F35; $papaya : #F68B21;

    $kiwi : #B3CB36; $color-primary : $rubineRed; $color-secondary : $aqua; $color-success : $kiwi;
  12. _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; } }
  13. _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; }}}
  14. _config.scss .default .module { color: red; } .unilever .module {

    color: orange; } .lipton .test { color: yellow; } .epson .test { color: green; }
  15. _config.scss .default .module { color: red; } .unilever .module {

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