Style guides are inherited from the old days of print. Defining typography and inks to ensure the next magazine looked like the last one. They were on paper, for paper. Designers were the ones who owned these documents, and they've inherited them for the web. Sure, sometimes style guides are put up online, as their own website. But they're still not in the code. This means that designs get set, then chucked over the fence to the folks who actually implement them, often leading to painful rewrites when design changes happen [Blue. No, yellow!]. By making Sass act as your style guide, breaking design into variables and mixins, a site becomes easier to maintain, and often options get opened up that someone on the visual side wouldn't have thought possible.

1. {style with attitude} Alexis Finch
@agentfin
#modevux

2. by Robby Ingebretsen
nerdplusart.com

4. after Erik Flowers
helloerik.com

13. separation of
CONTENT
from
PRESENTATIO
N

15. HOW
not
WHAT

17. Sass:
Syntactically
Awesome
Stylesheets

19. From many files
into one
stylesheet…

20. Preprocessors
Sass or SCSS or LESS or Stylus….
Whatever.
Sass if you’re using Ruby.
-> media queries built in
-> get to use Compass
Stylus if you’re using Node.
-> keyframes built in
-> utilize Node modules
LESS is …less.

21. $blue: #24bcd4
.buttons
border-color: darken($blue, 17%)
THE MAGIC
OF
VARIABLES!!!

22. from Stephen Hay
the-haystack.com

26. IT CAN EVEN DO MATH

27. by Brian Shaler
crappygraphs.com

28. NO
PROBLEM.

29. YOU CAN BE
F L E X I B L E

30. and FAST

31. SUPE
R

33. SKYPE

34. Alexis Finch
@agentfin
Thanks to [in order of appearance]
@ingebretsen
@erik_ux
@stephenhay
@itsdoge
@brianshaler