sass css tutorial code example

Example 1: sass vs scss

/* Answer to: "sass vs scss" */

/*
  The basic difference is the syntax. While SASS has a loose syntax
  with white space and no semicolons, the SCSS resembles more to CSS.
  SASS stands for Syntactically Awesome StyleSheets. It is an
  extension of CSS that adds power and elegance to the basic
  language.
  
  There's more differences but too much for me! Fortunately, someone
  else asked the same question over in StackOverflow! Here's a link
  to their answer:
  https://stackoverflow.com/questions/5654447/whats-the-difference-between-scss-and-sass
*/

Example 2: css sass scss

/*SMART DIFFERENCE*/
/*CSS*/
body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

/*SCSS*/

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

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


/*SASS*/
$font-stack:    Helvetica, sans-serif
$primary-color: #333

body
  font: 100% $font-stack
  color: $primary-color

Example 3: Sass Tutorial

/* Define standard variables and values for website */
$bgcolor: lightblue;
$textcolor: darkblue;
$fontsize: 18px;

/* Use the variables */
body {
  background-color: $bgcolor;
  color: $textcolor;
  font-size: $fontsize;
}