Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Using Sass as Your Style Guide

793 views

Published on

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.

Published in: Technology, Design
  • Be the first to comment

Using Sass as Your Style Guide

  1. 1. {style with attitude} Alexis Finch @agentfin #modevux
  2. 2. by Robby Ingebretsen nerdplusart.com
  3. 3. after Erik Flowers helloerik.com
  4. 4. separation of CONTENT from PRESENTATIO N
  5. 5. HOW not WHAT
  6. 6. Sass: Syntactically Awesome Stylesheets
  7. 7. From many files into one stylesheet…
  8. 8. 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.
  9. 9. $blue: #24bcd4 .buttons border-color: darken($blue, 17%) THE MAGIC OF VARIABLES!!!
  10. 10. from Stephen Hay the-haystack.com
  11. 11. IT CAN EVEN DO MATH
  12. 12. by Brian Shaler crappygraphs.com
  13. 13. NO PROBLEM.
  14. 14. YOU CAN BE F L E X I B L E
  15. 15. and FAST
  16. 16. SUPE R
  17. 17. SKYPE
  18. 18. Alexis Finch @agentfin Thanks to [in order of appearance] @ingebretsen @erik_ux @stephenhay @itsdoge @brianshaler

×