diff CSS, SCSS, SASS

in.css

/*CSS
In CSS we write code as depicted bellow, 
in full length.
*/
body{
 width: 800px;
 color: #ffffff;
}
body content{
 width:750px;
 background:#ffffff;
}

in.sass

/* SASS
In SASS however, 
the whole structure 
is visually quicker 
and cleaner than SCSS.

It is sensitive 
to white space 
when you are using 
copy and paste,
It seems that it doesn t 
support inline CSS currently. */

$color: #ffffff
$width: 800px
$stack: Helvetica, sans-serif

body
  width: $width
  color: $color
  font: 100% $stack

  content
    width: $width
    background:$color

in.scss

/* SCSS
In SCSS we can shorten this code using 
a @mixin so we don’t have to write color 
and width properties again and again. 
We can define this through a function, 
similarly to PHP or other languages.
*/

$color: #ffffff;
$width: 800px;

@mixin body{
 width: $width;
 color: $color;

 content{
  width: $width;
  background:$color;
 }
}