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. one file…
    so many sites

    View Slide

  2. @minamarkham

    View Slide

  3. @gdiDFW

    View Slide

  4. View Slide

  5. I build a lot of sites.

    View Slide

  6. View Slide

  7. View Slide

  8. View Slide

  9. View Slide

  10. One site to rule them all

    View Slide

  11. View Slide

  12. View Slide

  13. View Slide

  14. View Slide

  15. Theming
    Automation
    Documentation

    View Slide

  16. Theming

    View Slide

  17. File Structure

    View Slide

  18. @import

    View Slide

  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.

    View Slide

  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  

    View Slide

  21. @import  ‘normalize';  
    @import  'base';
    base/_index.scss
    CSS resets, Normalize,
    element styles
    01.  Utilities  
    02.  Libraries  
    03.  Base  

    View Slide

  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  

    View Slide

  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  

    View Slide

  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  

    View Slide

  25. utilities/_fonts.scss Web fonts imports & declarations
    01.  Utilities  
    02.  Libraries  
    03.  Base  
    04.  Layout  
    05.  Modules  
    06.  States  
    07.  @font-­‐face

    View Slide

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

    View Slide

  27. !important

    View Slide

  28. View Slide

  29. shame.css

    View Slide

  30. _shame.scss

    View Slide

  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

    View Slide

  32. small and
    readable

    View Slide

  33. mina.so/sassyStarter

    View Slide

  34. Variables

    View Slide

  35. Descriptive

    View Slide

  36. _config.scss
    $red : #E10E78;
    $black : #413F35;
    $purple : #F68B21;
    $green : #B3CB36;

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  41. Functional

    View Slide

  42. _config.scss
    $color-primary : #E10E78;
    $color-secondary : #00B3B5;
    $color-success : #B3CB36;

    View Slide

  43. _config.scss
    $color-primary : #E10E78;
    $color-secondary : #00B3B5;
    $color-success : #B3CB36;

    View Slide

  44. Descriptive +
    Functional
    http://sachagreif.com/sass-color-variables/

    View Slide

  45. _config.scss
    $rubineRed : #E10E78;
    $charcoal : #413F35;
    $papaya : #F68B21;
    $kiwi : #B3CB36;
    $color-primary : $rubineRed;
    $color-secondary : $aqua;
    $color-success : $kiwi;

    View Slide

  46. Methods

    View Slide

  47. Solution 1:
    Separate classes

    View Slide

  48. .theme-border {…}
    .theme-background {…}
    .theme-button {…}

    View Slide

  49. .theme-border {…}
    .theme-background {…}
    .theme-button {…}

    View Slide

  50. Solution 2:
    Maps & Functions
    http://www.zell-weekeat.com/organizing-multiple-theme-styles-with-sass/

    View Slide

  51. _config.scss
    $themes: (
    default : #444,
    unilever : #f1c40f,
    lipton : #c0392b,
    epson : #8e44ad
    );

    View Slide

  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; } }

    View Slide

  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; }}}

    View Slide

  54. _config.scss
    .module {
    @include theme() {
    color: $theme-color; }}

    View Slide

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

    View Slide

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

    View Slide

  57. Solution 3:
    @mixins

    View Slide

  58. @mixin theme($name) {
    @if $theme == $name {
    @content; } }

    View Slide

  59. $theme:
    rebeccapurple

    View Slide

  60. .module {
    @include
    theme($rebeccapurple) {…}
    }

    View Slide