Sass Basics

A very brief overview on getting started with Sass (Syntactically Awesome Stylesheets), presented at the SDJS Meetup in December 2013.

Transcript

1. Basics A quick guide to getting started with Syntactically Awesome Stylesheets
2. Daniel Robert Front-End Web Developer at Cuker Interactive Twitter: @danielwrobert Web: http://cupofvoodoo.com
3. What Is Sass? • CSS Preprocessor - a layer between your working stylesheets and the final output files that are served to the browser. • Sass adds additional functionality to the CSS language which allows you to write more efficient and maintainable code.
4. Installation • Sass Runs on Ruby, which uses Gems to install its various packages of code • Fire up your Terminal and type in gem install sass ◦ If this fails you may need superuser privileges on your system, so run sudo gem install sass instead ◦ After install completes, you can test by typing in sass - v, which should return Sass 3.2.12 (Media Mark)
5. Usage • To run Sass from the Terminal, simply type in the command sass --watch style.scss:style.css ◦ style.scss being your input file and style.css being your output file (named whatever you prefer) • If you are not a fan of the Terminal, there are many applications that can get you up and running quickly
6. Sass Features
7. Variables • Variables, just like in JavaScript, are used to store bits of information to be reused throughout your stylesheets. ◦ Slightly different syntax but the same idea. • You can store any CSS value you will want to reuse.
8. Mixins • Mixins allow you to create blocks of CSS declarations that you can reuse throughout your project. • You can pass values to your mixin to make it more flexible.
9. Inheritance • Sass incorporates inheritance with the @extend feature • @extend allows you to share a set of CSS properties from one selector to another
10. Nesting • Sass lets you nest your CSS selectors which creates a visual hierarchy in your stylesheet • This makes your code more readable, thus making it easier to organize
11. Partials and @import
12. • Sass Official Website - http://sass-lang.com • CSS Tricks: Get Yourself Preprocessing in Just a Few Minutes - http://goo.gl/tsHQtP • CSS Tricks: Musings on Preprocessing - http://goo.gl/OvBUQ4 • A List Apart: Organize That Sass - http://goo.gl/WDmnHI • Working with CSS Preprocessors - http://goo.gl/4o4GtH Additional Resources
13. Thank You!
14. Daniel Robert Front-End Web Developer at Cuker Interactive Twitter: @danielwrobert Web: http://cupofvoodoo.com