scss example with html

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: how to use scss in html

/* Answer to: "how to use scss in html" */

/*
  Unfortunately, you can't directly insert an SCSS (Sassy CSS) file
  into your HTML. That's because SASS is a superset (or so-called
  preprocessor or extension) of CSS3's syntax, which is NOT
  supported by web browsers.

  To take full advantage of all the incredible features offered by
  SCSS in your HTML page, you’ll first have to compile it down
  to CSS.

  For more information, check out the answers in:
  https://www.quora.com/How-do-I-insert-an-SCSS-file-into-HTML
*/

Example 3: css vs scss

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

/*
  Sass has two syntaxes. The most commonly used syntax is known as “SCSS”
  (for “Sassy CSS”), and is a superset of CSS3's syntax. ... Inspired by
  Haml's terseness, it's intended for people who prefer conciseness over
  similarity to CSS. Instead of brackets and semicolons, it uses the
  indentation of lines to specify blocks.

  Check the full answer by clicking on the source but the main thing here is:
  SCSS is a **SUPERSET** of the CSS3's syntax.
*/