Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Sass Basics

7bc4c5263bd87380a775d22aa165b9f1?s=47 Dan Robert
December 03, 2013

Sass Basics

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


Dan Robert

December 03, 2013

More Decks by Dan Robert

Other Decks in Programming


  1. Basics A quick guide to getting started with Syntactically Awesome

  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