Sass Vs SCSS

Css is taking its form to next level, by including scripts in it and I'm seeing lot of question, discussion about the SASS and SCSS... which one to follow, which is easy....what is the difference...

Here, I'm going to summarize what i found and examples are taken from wikipedia...;-)

SASS


Sass (Syntactically Awesome Stylesheets) is the scripting laugage that is interpreted into CSS. And It has 2 syntaxes.

1.  Indented syntax - uses indentation to separate code blocks
2. SCSS (Sassy CSS) - uses block formatting like that of CSS

SassScript provides the following mechanisms: variables, nesting, mixins, and selector inheritance

Variables : 

$margin: 20px;

body
 margin : $margin / 2

Nesting:

table.hl {
  margin: 2em 0;
  td.ln {
    text-align: right;
  }
}

Equilent CSS : 

table.hl {
  margin: 2em 0;
}
table.hl td.ln {
  text-align: right;
}

Mixins:

Most helpful feature, to avoid repeated code and easy modification in CSS.

@mixin table-base {
  th {
    text-align: center;
    font-weight: bold;
  }
  td, th {padding: 2px}
}

#data {
  @include table-base;
}

Equivalent Css:

#data th {
  text-align: center;
  font-weight: bold;
}
#data td, #data th {
  padding: 2px;
}

Selector Inheritance:

Interestingly, you can implement inheritance as like java / c# by using extend keyword.

.error {
  border: 1px #f00;
  background: #fdd;
}
.error.intrusion {
  font-size: 1.3em;
  font-weight: bold;
}

.badError {
  @extend .error;
  border-width: 3px;
}

Equivalent to

.error, .badError {
  border: 1px #f00;
  background: #fdd;
}

.error.intrusion,
.badError.intrusion {
  font-size: 1.3em;
  font-weight: bold;
}

.badError {
  border-width: 3px;
}

You can get more information from : http://sass-lang.com/guide

SCSS


The new main syntax (as of Sass 3) is known as “SCSS” (for “Sassy CSS”)

So, most people with interchange the term SASS and SCSS...Dont get confused....
When you become the master of SASS, check out the "Foundation" framework....
http://foundation.zurb.com/docs/index.html

Its simply awesome (http://foundation.zurb.com/business/why-foundation.html ).... You can design the website so quick and fast with Responsive Web design.