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

1. one file…
so many sites

2. @minamarkham

3. @gdiDFW

5. I build a lot of sites.

10. One site to rule them all

15. Theming
Automation
Documentation

16. Theming

17. File Structure

18. @import

19. 01.
Utilities
utilities/_index.scss
@import
'global';
@import
'functions';
@import
'mixins';
@import
'helpers';
Variables, mixins, functions, etc.
Basically anything that doesn’t
output CSS by itself.

20. utilities/_lib.scss
@import
"lib/susy";
@import
"lib/font-­‐awesome";
@import
"lib/pesticide";
Third-party libraries such
as Susy, Font Awesome,
Pesticide, and other
plugins.
01.
Utilities
02.
Libraries

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

22. layout/_index.scss
@import
'header';
@import
'footer';
@import
'sidebar';
Grid styles, major layout
components (e.g. header, footer,
sidebar, etc)
01.
Utilities
02.
Libraries
03.
Base
04.
Layout

23. modules/_index.scss
@import
'btn';
@import
'table';
@import
'nav';
Individual modules, such as
buttons, navigation, menus, etc.
01.
Utilities
02.
Libraries
03.
Base
04.
Layout
05.
Modules

24. states/_index.scss
@import
'states';
@import
'touch';
Describe states of being, ex:
active, collapsed or hidden
01.
Utilities
02.
Libraries
03.
Base
04.
Layout
05.
Modules
06.
States

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

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

27. !important

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. $red : #E10E78;
$dkgray : #413F35;
$purple : #F68B21;
$dkpurple : #663399;
$dkgreen : #B3CB36;
$gray : #332421;
$blackish : #121212;
$kindawhite : #f3f3f3;
_config.scss

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

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

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

41. Functional

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

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

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

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

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. @mixin theme ($themes: $themes) {
@each $theme, $map in $themes {
.#{$theme} & {
$theme-color: map-fetch($themes,
_mixins.scss
$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) {…}
}

61. *Disclaimer

62. Automation

65. sass
watch
concat
uglify
imagemin
sassdoc

66. Split your tasks into
modules

67. project/
-Gruntfile.js
-grunt/
--sass.js
--watch.js
--concat.js
--uglify.js
--imagemin.js
--sassdoc.js
http://www.html5rocks.com/en/tutorials/tooling/supercharging-your-gruntfile/

68. load-grunt-config
http://www.html5rocks.com/en/tutorials/tooling/supercharging-your-gruntfile/

69. Supercharging
your Gruntfile
- By Paul Bakaus
mina.so/super-grunt

70. Documentation

71. http://sassdoc.com/

72. /**
* Media Queries
* Allows you to use inline media queries.
* @link http://jakearchibald.github.com/sass-ie/
* @param {String} $breakpoint - breakpoint
* @param {String} $query (min-width) - query type
* @param {String} $type (screen) - media type
* @example scss
* .foobar { @include mq(20em) { ... } }
*/
_mixins.scss

74. http://www.stylestats.org/

75. Recap

76. mina.so/sassyStarter

77. mina.so/one-sass
thanks!
@minamarkham