Introduction to SASS

About sass : Sass is an extension of CSS that adds power and elegance to the basic language. It allows you to use variables, nested rules, mixins, inline imports, and more, all with a fully CSS-compatible syntax. Sass helps keep large stylesheets well-organized, and get small stylesheets up and running quickly, particularly with the help of the compass style library . There are two syntaxes available for Sass. The first, known as SCSS (Sassy CSS), is an extension of the syntax of CSS3.

Example  code : $font-stack:    Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}

The second and older syntax, known as the indented syntax (or sometimes just ???Sass???), provides a more concise way of writing CSS. It uses indentation rather than brackets to indicate nesting of selectors, and newlines rather than semicolons to separate properties.

Example Code:

$font-stack:    Helvetica, sans-serif
$primary-color: #333
body
  font: 100% $font-stack
  color: $primary-color

We can import one type of syntax to other automatically using the sass-convert command line tool:

# Convert Sass to SCSS
$ sass-convert style.sass style.scss
# Convert SCSS to Sass
$ sass-convert style.scss style.sass

I can give you live simple examples in brief how practically this techniques will work effectively in our daily coding . Variables :

Think of variables as a way to store information that you want to reuse throughout your stylesheet. You can store things like colors, font stacks, or any CSS value you think you'll want to reuse. Sass uses the $ symbol to make something a variable. Here's an example:

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

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

When the Sass is processed, it takes the variables we define for the $font-stack and $primary-color and outputs normal CSS with our variable values placed in the CSS. This can be extremely powerful when working with brand colors and keeping them consistent throughout the site. Nesting:

Sass will let you nest your CSS selectors in a way that follows the same visual hierarchy of your HTML

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

You'll notice that the ul, li, and a selectors are nested inside the nav selector. This is a great way to organize your CSS and make it more readable. When you generate the CSS you'll get something like this:

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

Import: CSS has an import option that lets you split your CSS into smaller, more maintainable portions. The only drawback is that each time you use @import in CSS it creates another HTTP request. Sass builds on top of the current CSS @import but instead of requiring an HTTP request, Sass will take the file that you want to import and combine it with the file you're importing into so you can serve a single CSS file to the web browser. Let's say you have a couple of Sass files, _reset.scss and base.scss. We want to import _reset.scss into base.scss.

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

Notice we're using @import 'reset'; in the base.scss file. When you import a file you don't need to include the file extension .scss. Sass is smart and will figure it out for you.

Mixins: Some things in CSS are a bit tedious to write, especially with CSS3 and the many vendor prefixes that exist. A mixin lets you make groups of CSS declarations that you want to reuse throughout your site. You can even pass in values to make your mixin more flexible. A good use of a mixin is for vendor prefixes. Here's an example for border-radius. 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);
 }

To create a mixin you use the @mixin directive and give it a name. We've named our mixin border-radius. We're also using the variable $radius inside the parentheses so we can pass in a radius of whatever we want. After you create your mixin, you can then use it as a CSS declaration starting with @includes followed by the name of the mixin. When your CSS is generated it'll look like this:

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

Extend/Inheritance: This is one of the most useful features of Sass. Using @extend lets you share a set of CSS properties from one selector to another. It helps keep your Sass very DRY. In our example we're going to create a simple series of messaging for errors, warnings and successes.

SASS SYNTAX.

.message
  border: 1px solid #ccc
  padding: 10px
  color: #333
.success
  @extend .message
  border-color: green
.error
  @extend .message
  border-color: red
.warning
  @extend .message
      border-color: yellow

What the above code does is allow you to take the CSS properties in .message and apply them to .success, .error, & .warning. The magic happens with the generated CSS, and this helps you avoid having to write multiple class names on HTML elements. This is what it looks like:

.message, .success, .error, .warning {
 border: 1px solid #cccccc;
 padding: 10px;
  color: #333;
}

.success {
  border-color: green;
}

.error {        
  border-color: red;
}
.warning {
  border-color: yellow;
    }

Operators: Doing math in your CSS is very helpful. Sass has a handful of standard math operators like +, -, *, /, and %. In our example we're going to do some simple math to calculate widths for an aside & article.

SCSS SYNTAX

.container { width: 100%; }
article[role="main"] {
  float: left;
  width: 600px / 960px * 100%;
}       
aside[role="complimentary"] {
  float: right;
  width: 300px / 960px * 100%;
   }

We've created a very simple fluid grid, based on 960px. Operations in Sass let us do something like take pixel values and convert them to percentages without much hassle. The generated CSS will look like:

.container {
 width: 100%;
}
article[role="main"] {
  float: left;
  width: 62.5%;
}
aside[role="complimentary"] {
  float: right;
  width: 31.25%;
   }

This is a brief overview of how sass simplifies our programing complexity's.