SASS - CSS Preprocessor

Front end engineering has always challenge to choose right updated technologies, I have already updated SASS long back and used in many projects. It is really cool and very easy to manage CSS rules. I feel AngularJS is the another hot framework in front-end technologies. Don't expect right output in first try, You can get the right result if you really interested.

I'm really interest to learn new technologies which impressed me more, But I cannot learn any technology with anyone's force or without my interest. SASS is very easy and useful for big/small projects.

Advantages of SASS

Variables:

Variables as a way to store values that you want to reuse throughout your stylesheet. You can store things like colors, font name, or any CSS value. SASS uses the $ symbol to create variable.

SCSS SYNTAX

$font-family: Arial, sans-serif;
$primary-color: #DDD;

body {
  font-family: $font-family;
  color: $primary-color;
}

CSS OUTPUT

body {
  font-family: Arial, sans-serif;
  color: #DDD;
}

Nesting:

Sass allows you to nest selectors and rules instead of requiring you to repetitively list selectors.

SCSS SYNTAX:

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

CSS OUTPUT

nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
li { 
	display: inline-block;
}
nav ul li a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
}

Mixins:

SASS mixins are the stylesheet equivalent of functions. SASS allow you define a series of rules which can be include in to another ruleset.

SCSS SYNTAX

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

.box { @include border-radius(10px); }

CSS OUTPUT

.box {
  -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
      -ms-border-radius: 10px;
          border-radius: 10px;
}

Partials:

You can create partial SASS files that contain little snippets of CSS that you can include in other Sass files. This is a great way to modularize your CSS and help keep things easier to maintain. 

You might name it something like _partial.scss. The underscore lets Sass know that the file is only a partial file and that it should not be generated into a CSS file. Sass partials are used with the @import directive.

Import:

SASS builds on top of the current CSS @import but instead of requiring an HTTP request, Sass will import file that you want to import and combine, So you can get single CSS file to the web browser.

CSS has an import option that lets you split your CSS into smaller. The only drawback is that each time you use @import in CSS it creates new HTTP request.

SCSS SYNTAX

// _reset.scss

html,
body,
ul,
ol {
   margin: 0;
  padding: 0;
}

// base.scss

@import 'reset';

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

Operators:

Sass has a handful of standard math operators like +, -, *, /, and %.

SCSS SYNTAX

.wrapper { width: 100%; }

article {
  float: left;
  width: 600px / 960px * 100%;
}

aside {
  float: right;
  width: 300px / 960px * 100%;
}

CSS OUTPUT

.wrapper {
  width: 100%;
}

article {
  float: left;
  width: 62.5%;
}

aside {
  float: right;
  width: 31.25%;
}