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.
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)
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
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.
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.
Inheritance ● Sass incorporates inheritance with the @extend feature ● @extend allows you to share a set of CSS properties from one selector to another
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
● 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
danielwrobert
okuramasafumi
fishofprey
usualoma
ivargrimstad
n1215
smiyawaki0820
chatii
suzuki
kubode
kazutan
yutootsuka
makomakok
moore
marktimemedia
eileencodes
dougneiner
cherdarchuk
nonsquared
sachag
brianwarren
jrom
jonyablonski
jacobian
keavy