Saas Css

Sass is a meta-language on top of CSS that’s used to describe the style of a document cleanly and structurally, with more power than flat CSS allows. Sass both provides a simpler, more elegant syntax for CSS and implements various features that are useful for creating manageable stylesheets.

The Sass Team

Sass was originally created by Hampton Catlin. He and Nathan Weizenbaum designed Sass through version 2.0. Hampton lives in Jacksonville, Florida and is the lead mobile developer for Wikimedia.
Chris Eppstein joined the Sass team in late 2008. He and Nathan have designed Sass from version 2.2 on. Chris is the creator of Compass, the first Sass-based framework. Chris lives in San Jose, California with his wife and daughter. He is the Software Architect for Caring.com, a website devoted to the thirty-four million caregivers whose parents are sick or elderly.
Nathan Weizenbaum is the primary designer of Sass, and has been the main developer since its inception. He lives in Seattle, Washington and will be going to work for Google once he finishes his last year at the University of Washington.


Sass makes CSS fun again. Sass is an extension of CSS3, adding nested rules, variables, mixins, selector inheritance, and more. It’s translated to well-formatted, standard CSS using the command line tool or a web-framework plugin.

Sass has two syntaxes. The new main syntax (as of Sass 3) is known as “SCSS” (for “Sassy CSS”), and is a superset of CSS3’s syntax. This means that every valid CSS3 stylesheet is valid SCSS as well. SCSS files use the extension .scss.
The second, older syntax is known as the indented syntax (or just “Sass”). Inspired by Haml’s terseness, it’s intended for people who prefer conciseness over similarity to CSS. Instead of brackets and semicolons, it uses the indentation of lines to specify blocks. Although no longer the primary syntax, the indented syntax will continue to be supported. Files in the indented syntax use the extension .sass.

Variables

Use the same color all over the place? Need to do some math with height and width and text size? Sass supports variables as well as basic math operations and many useful functions.

Nesting

Sass avoids repetition by nesting selectors within one another. The same thing works with properties.

Mixins

Even more useful than variables, mixins allow you to re-use whole chunks of CSS, properties or selectors. You can even give them arguments. 

Arguments

The real power of mixins comes when you pass them arguments. Arguments are declared as a parenthesized, comma-separated list of variables. Each of those variables is assigned a value each time the mixin is used.
Mixin arguments can also be given default values just like you’d declare them normally. Then the user of the mixin can choose not to pass that argument and it will be assigned the default value.

 

Selector Inheritance

Sass can tell one selector to inherit all the styles of another without duplicating the CSS properties. 

@import

Stylesheets can get pretty big. CSS has an @import directive that allows you to break your styles up into multiple stylesheets, but each stylesheet takes a separate (slow) HTTP request. That’s why Sass’s @import directive pulls in the stylesheets directly. Not only that, but any variables or mixins defined in @imported files are available to the files that import them.
Sass has a naming convention for files that are meant to be imported (called “partials”): they begin with an underscore. Let’s create a partial called _rounded.scss to hold our rounded mixin.
In order to support both .scss and .sass files, Sass allows files to be imported without specifying a file extension. That means we can just import "rounded", rather than "rounded.scss".

For more reference use 

http://sass-lang.com/

http://css2sass.heroku.com/ 

http://en.wikipedia.org/wiki/Sass_%28stylesheet_language%29