#Getting Started#

Sass is a preprocessor language for CSS. Its an acronym for “Syntactically Awesome Style Sheets”. Sass Lang has 2 flavors, scss longhand mimicking css3 and sass short hand version. The only difference is syntax changes between the file versions.

Scss defines all its scoping via brackets and the line ends with a semicolon.

.header {
	.title {
		font-size: 2em;
	}
}

Sass defines its scoping based on spacing much like haml, python and coffee script. The line ends are based on line breaks, no semicolon is needed.

.header
  .title
    font-size: 2em

Setup

Sass lang is a ruby library and is installed as a gem. To install sass, run gem install sass. Once installed you should be able to run sass on the command line.

Usage

Sass lang helps to simplify your styles in you project by providing a reuse and variable functionality. With these features you are able to create a clean and concise approach to styling your markup.

To preprocess the sass / scss file run the following:

sass application.sass application.css

Tooling

Here are a couple tools that will help you with syntax highlighting for sass: * Sublime plugin for sass (https://github.com/n00ge/sublime-text-haml-sass) * Textmate plugin for sass (https://github.com/nathos/sass-textmate-bundle)

Next: Basics