One Sass File, So Many Sites

one file… so many sites

@minamarkham

@gdiDFW

I build a lot of sites.

One site to rule them all

Theming Automation

Documentation

Theming

File Structure

@import

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

!important

shame.css

_shame.scss

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

_shame.scss because hacks happen

small and readable

mina.so/sassyStarter

Variables

Descriptive

_config.scss

$red : #E10E78; $black : #413F35; $purple : #F68B21; $green : #B3CB36;

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

Functional

_config.scss

$color-primary : #E10E78; $color-secondary : #00B3B5; $color-success : #B3CB36;

Descriptive + Functional

http://sachagreif.com/sass-color-variables/

_config.scss

$rubineRed : #E10E78; $charcoal : #413F35; $papaya : #F68B21; $kiwi : #B3CB36;

$color-primary : $rubineRed; $color-secondary : $aqua; $color-success : $kiwi;

Methods

Solution 1: Separate classes

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

Solution 2: Maps & Functions

http://www.zell-weekeat.com/organizing-multiple-theme-styles-with-sass/

_config.scss

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

_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

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

_config.scss

.default .module { color: red; }

.unilever .module { color: orange; }

.lipton .test { color: yellow; }

.epson .test { color: green; }

Solution 3: @mixins

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

$theme: rebeccapurple

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

*Disclaimer

Automation

sass watch concat uglify

imagemin sassdoc

Split your tasks into modules

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/

load-grunt-config

http://www.html5rocks.com/en/tutorials/tooling/supercharging-your-gruntfile/

mina.so/super-grunt

Supercharging your Gruntfile

- By Paul Bakaus

Documentation

http://sassdoc.com/

http://sassdoc.com/

_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) { ... } } */

http://www.stylestats.org/

https://github.com/SassDoc/SassDoc/

mina.so/sassyStarter

thanks!

mina.so/one-sass

@minamarkham

http://mina.so/one-sass

One Sass File, So Many Sites

Technology

Transcript of One Sass File, So Many Sites