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
   

   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