sass css 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: 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: what is scss

SCSS is a preprocessor which lets you use features that aren’t a part of the wider CSS standard yet, and provides better workflows for maintaining your stylesheets.

With SCSS preprocessor, you can reduce the amount of times you repeat yourself and ensure you’re writing clean, maintainable code for the future.

Scss can take css code and work. 

SCSS is fully compatible with the syntax of CSS, while still supporting the full power of Sass.

Scss is an extension of the syntax of CSS. This means that every valid CSS stylesheet is a valid SCSS file with the same meaning. In addition, SCSS understands most CSS hacks and vendor-specific syntax, such as IE's old filtersyntax. This syntax is enhanced with the Sass features described below. Files using this syntax have the .scss extension.
Dry (dont repeat yourself) code is much better then wet code (write every time).

Example 4: 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 5: 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;
}