What is Sass ? how to use it and compile ?
What is Sass ?
Sass stands for Syntactically Awesome Style Sheets. It is a CSS preprocessor. The syntax is .scss (example style.scss) and output file can be style.css. It is an extension of CSS that enables you to use things like variables, nested rules, inline imports and more. It also helps to keep things organised and allows you to create style sheets faster.
First Sass appeared in 2006. It is open-source and coded in Ruby.
What is CSS preprocessor
A CSS preprocessor is a scripting language that extends CSS by allowing developers to write code in one language and then compile it into CSS.
How to use it ?
Using is pretty easy way. See the Sass Documentation for additional references and examples.
Let me few examples in writing the Sass.
Example for Variable.
|
1 2 3 4 5 6 7 8 9 |
$font-stack: Helvetica, sans-serif; $primary-color: #333; body { font: 100% $font-stack; color: $primary-color; } |
The following CSS will be produced
|
1 2 3 4 5 6 |
body { font: 100% Helvetica, sans-serif; color: #333; } |
Example of Nested.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
nav { ul { margin: 0; padding: 0; list-style: none; } li { display: inline-block; } a { display: block; padding: 6px 12px; text-decoration: none; } } |
The CSS output is as follows:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
nav ul { margin: 0; padding: 0; list-style: none; } nav li { display: inline-block; } nav a { display: block; padding: 6px 12px; text-decoration: none; } |
There are many properties in writing CSS with ease like extent, import, Mixins, partials, operators. The idea is that with this directive you won’t have to include multiple class names on your HTML elements and can keep your code DRY.
For more to learn follow the Sass Community Guidelines.
How to compile ?
There are many tools for compiling the Sass which are paid and free. The popular free tool is Koala-app and Scout-App which is easy to compile ans shows the errors with line numbers. Just drag and dropping the file folder to the tool and give the output path.
For more to learn follow the Koala-Doc and Scout-Doc
Compass is an open-source CSS Authoring Framework.
Compass uses Sass
Sass is an extension of CSS3 which adds nested rules, variables, mixins, selector inheritance, and more. Sass generates well formatted CSS and makes your stylesheets easier to organize and maintain.
- Experience cleaner markup without presentational classes.
- It’s chock full of the web’s best reusable patterns.
- It makes creating sprites a breeze.
- Compass mixins make CSS3 easy.
- Create beautiful typographic rhythms.
- Download and create extensions with ease.
.
