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.
@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
@import ‘normalize'; @import 'base';
base/_index.scss
CSS resets, Normalize, element styles
01. Utilities 02. Libraries 03. Base
@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
@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
@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
utilities/_fonts.scss Web fonts imports & declarations
01. Utilities 02. Libraries 03. Base 04. Layout 05. Modules 06. States 07. @font-‐face
states/_print.scss Print styles
01. Utilities 02. Libraries 03. Base 04. Layout 05. Modules 06. States 07. @font-‐face 08. Print
01. Utilities 02. Libraries 03. Base 04. Layout 05. Modules 06. States 07. @font-‐face 08. Print 09. Shame
_shame.scss because hacks happen
_config.scss
$red : #E10E78; $dkgray : #413F35; $purple : #F68B21; $dkpurple : #663399; $dkgreen : #B3CB36; $gray : #332421; $blackish : #121212; $kindawhite : #f3f3f3;
_config.scss
$red : #E10E78; $dkgray : #413F35; $purple : #F68B21; $dkpurple : #663399; $dkgreen : #B3CB36; $gray : #332421; $blackish : #121212; $kindawhite : #f3f3f3;
_config.scss
$rubineRed : #E10E78; $charcoal : #413F35; $papaya : #F68B21; $kiwi : #B3CB36;
$color-primary : $rubineRed; $color-secondary : $aqua; $color-success : $kiwi;
Solution 2: Maps & Functions
http://www.zell-weekeat.com/organizing-multiple-theme-styles-with-sass/
_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; } }
_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; }}}
_config.scss
.default .module { color: red; }
.unilever .module { color: orange; }
.lipton .test { color: yellow; }
.epson .test { color: green; }
_config.scss
.default .module { color: red; }
.unilever .module { color: orange; }
.lipton .test { color: yellow; }
.epson .test { color: green; }
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/
_mixins.scss
/** * 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) { ... } } */