Smarter CSS With SASS

Sass is a compiler of CSS, has been around since 2007, adds useful programming constructs to CSS and is becoming a standard for authoring stylesheets. Sass enhancements make CSS more versatile by eliminating duplication of common style patterns, allowing style logic to be reused and thus making your stylesheets easier to maintain.

In this session you will earn practical Sass tips and best practices for making your projects easier to build and simpler to maintain. The session will cover Sass basics, how to leverage the power of Sass mixins for cleaner code, tips on how to use Sass for responsive grid layouts by using Sass functions and media queries, how to use Sass alongside Compass efficiently and lastly review a few boilerplate examples with suggestions on how to structure your assets files.

Github: https://github.com/elle/smarter-css-with-sass

About me:

Elle is a web designer and developer with a passion for web standards and a unique background that bridges the gap between the front- and back-end. She employs best-practice techniques to deliver clean, functional and user-friendly websites. In 2007, she discovered Ruby and has since been building web applications with Ruby, Rails, Haml, Sass, Coffeescript and other awesome technologies.

@aemeredith

REFERENCES AND RESOURCES:

Books:

• Jonathan Snook, Scalable and Modular Architecture for CSS, http://smacss.com/book
• Ethan Marcotte, Responsive Web Design, http://www.abookapart.com/products/responsive-web-design

Online Tools:

• http://responsify.it/
• http://gridpak.com/

Good Reads:

• Chris Eppstein, 2011, Code smarter CSS with Sass, Net Magazine, http://www.netmagazine.com/tutorials/code-smarter-css-sass

• David Demaree, 2011, Getting Started with Sass, A List Apart, http://www.alistapart.com/articles/getting-started-with-sass/

• Jeffrey Way, 2011, Mastering Sass, NetTuts+, http://net.tutsplus.com/sessions/mastering-sass/

• Jeremy Hixson, 2011, An Introduction To LESS, And Comparison To Sass, Smashing Magazine, http://coding.smashingmagazine.com/2011/09/09/an-introduction-to-less-and-comparison-to-sass/

• Norris, 2012, SASS and Compass for Web Designers: Introduction, NetTuts+, http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/sass-and-compass-for-web-designers-introduction/

• The Sass Way, http://thesassway.com/guides

• Trevor Davis, 2012, Building a Nested Responsive Grid with Sass & Compass, Viget Labs, http://viget.com/inspire/building-a-nested-responsive-grid-with-sass-compass

Presentations:

• Jonathan Verrecchia, 2012, CSS Preprocessors, http://verekia.com/slides/css-preprocessors

• Sass/Compass/LESS: Tips, Tricks & Best Practices https://speakerdeck.com/u/beausmith/p/less-tips-tricks-best-practices

Further Reading: Semantic id/classes vs. Object Oriented CSS for scalable stylesheets

• Andy Hume, 2012, CSS for Grown Ups: Maturing Best Practices, http://schedule.sxsw.com/2012/events/event_IAP9410

• Natalie Downe, 2008, Writing Maintainable CSS, http://www.slideshare.net/nataliedowne/css-systems-presentation

• Nicolas Gallagher, 2012, About HTML semantics and front-end architecture, http://nicolasgallagher.com/about-html-semantics-front-end-architecture/

• Nichole Sullivan, Object Oriented CSS Project, https://github.com/stubbornella/oocss/wiki