What is Sass?

Sass stands for Syntactically Awesome Stylesheets. It is a scripting language that compiles sass code into css code. In css, there are no programming features such as variables, nesting, partials, imports, inheritance, and operators, etc. Sass understands all css code and those additional programming features. You write your html styling code in sass code with the help of all these programming features, and then compile the scss file into pure css file.

Install Sass

sass is built on Ruby, gem has to be installed first before installing sass. On ubuntu, install gem by sudo apt-get install ruby-full rubygems On Windows, install gem by downloading the installer from http://rubyinstaller.org/. On Mac, it comes with gem installed. After the gem is installed, run these commands to install sass and see the version.

gem install sass
sass -v

Using Sass

You can write partial sass files and then import the partial sass files. Let build 3 sass files _p_tag.scss, _body.scss and main.scss

_p_tag.scss

$ppad:    50px;
$p-bg-color: #f2f2f2;
p {
    padding: $ppad;
    background: $p-bg-color;
    font-size: 32px;
    font-weight: bold;
    text-align: center;
}

_body.scss

$my-font:    Helvetica, sans-serif;
$my-color: #eee;

body {
  font: 100% $my-font;
  color: $my-color;
}

main.scss

html {
	width: 100%;
	height: 100%;
}
@import 'p_tag';
@import 'body';

Compile these 3 scss files into 1 css file

sass --watch main.scss

Compile these 3 scss files into a compressed css file

sass --watch main.scss --style compressed

The compiled css file without compression. main.css

html {
  width: 100%;
  height: 100%; }

p {
  padding: 50px;
  background: #f2f2f2;
  font-size: 32px;
  font-weight: bold;
  text-align: center; }

body {
  font: 100% Helvetica, sans-serif;
  color: #eee; }

The compiled css file with compression. main.css

html{width:100%;height:100%}p{padding:50px;background:#f2f2f2;font-size:32px;font-weight:bold;text-align:center}body{font:100% Helvetica,sans-serif;color:#eee}
/*# sourceMappingURL=main.css.map */