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.

7bc4c5263bd87380a775d22aa165b9f1?s=128

Dan Robert

December 03, 2013
Tweet

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