Wednesday, July 8, 2015

What is Sass?

Well, Sass is not software as super service. Sass stands for Syntactically Awesome StyleSheets. It is actually an extension of CSS to make CSS more powerful and elegant. Sass helps organizing unwieldy large CSS and let smaller CSS to run faster using the Compass Style Library.

The main features from Sass documentation are:

  •     Fully CSS3-compatible
  •     Language extensions such as variables, nesting, and mixins
  •     Many useful functions for manipulating colors and other values
  •     Advanced features like control directives for libraries
  •     Well-formatted, customizable output
Sass has two types of syntaxes, one older and the other new. The more recent SassyCSS (Scss) is an extension of CSS3 which essentially means that all CSS3 stylesheets are valid SCSS file with the extension .scss.
The older syntax called Sass uses indented syntax instead of brackets for nesting the selectors and has the extension .sass.

It is easy to go from one to the other with a simple convert command.

Note: Sass is Ruby based and windows users need to install Ruby .

After installing Ruby, you can convert the .Scss file to .css file calling the sass command as shown here:   
           sass input.scss output.css
The CSS generated is what you are going to use in your web page.

Here is the reference to documentation:

Here is an example of variables defined with .scss syntax being converted to .css:
$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;

$font-stack and $primary-color are variables in the Scss syntax and this gets changed to .css after processing as in the following:
body {
  font: 100% Helvetica, sans-serif;
  color: #333;

The above is just an example of a variable, but dig deeper to find the rich coding possibilities.

Well give it a try and find out yourself in what ways you can improve your styling.

No comments: