Let's say we have a website with three main colors:

So, how many times do you need to type those HEX values? A LOT of times. And what about variations of the same colors? Instead of typing the above values a lot of times, you can use Sass and write this:

Sass Example

/* define variables for the primary colors */
$primary_1: #a2b9bc;
$primary_2: #b2ad7f;
$primary_3: #878f99;

/* use the variables */
.main-header {
  background-color: $primary_1;
}

.menu-left {
  background-color: $primary_2;
}

.menu-right {
  background-color: $primary_3;
}

Sass File Type.
Sass files has the ".scss" file extension.

Sass Comments
Sass supports standard CSS comments /* comment */, and in addition it supports inline comments // comment:

Sass Example

/* define primary colors */
$primary_1: #a2b9bc;
$primary_2: #b2ad7f;

/* use the variables */
.main-header {
background-color: $primary_1; // here you can put an inline comment
}

$myFont: Helvetica, sans-serif;
$myColor: red;
$myFontSize: 18px;
$myWidth: 680px;

body {
  font-family: $myFont;
  font-size: $myFontSize;
  color: $myColor;
}

#container {
  width: $myWidth;

body {
font-family: Helvetica, sans-serif;
font-size: 18px;
color: red;
}

#container {
width: 680px;
}

$myColor: red;

h1 {
  $myColor: green;
  color: $myColor;
}

p {
  color: $myColor;
}

Will the color of the text inside a tag be red or green? It will be red! The other definition, $myColor: green; is inside the rule, and will only be available there!

h1 {
  color: green;
}

p {
  color: red;
}

$myColor: red;

h1 {
  $myColor: green !global;
  color: $myColor;
}

p {
  color: $myColor;
}

Now the color of the text inside a tag will be green! So, the CSS output will be:
SCSS Output:

h1 {
  color: green;
}

p {
  color: green;
}

nav {

ul {
margin: 0;
padding: 0;
 list-style: none;
  }
  
li {
    display: inline-block;
  }
  
a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

Notice that in Sass, the ul, li, and a selectors are nested inside the nav selector. While in CSS, the rules are defined one by one (not nested):
CSS Syntax:

nav ul {
margin: 0;
padding: 0;
list-style: none;
}

nav li {
display: inline-block;
}
nav a {
display: block;
padding: 6px 12px;
text-decoration: none;
}

Example
SCSS Syntax:

font: {
  family: Helvetica, sans-serif;
  size: 18px;
  weight: bold;
}

text: {
  align: center;
  transform: lowercase;
  overflow: hidden;
}

The Sass transpiler will convert the above to normal CSS:
CSS Output:

font-family: Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;

text-align: center;
text-transform: lowercase;
text-overflow: hidden;

@import "variables";
@import "colors";
@import "reset";

Let's look at an example: Let's assume we have a reset file called "reset.scss", that looks like this:
Example
SCSS Syntax (reset.scss):

html,
body,
ul,
ol {
  margin: 0;
  padding: 0;
}

SCSS Syntax (standard.scss):

@import "reset";

body {
  font-family: Helvetica, sans-serif;
  font-size: 18px;
  color: red;
}

So, when the "standard.css" file is transpiled, the CSS will look like this:

html, body, ul, ol {
  margin: 0;
  padding: 0;
}

body {
  font-family: Helvetica, sans-serif;
  font-size: 18px;
  color: red;
}

Example
"_colors.scss":

$myPink: #EE82EE;
$myBlue: #4169E1;
$myGreen: #8FBC8F;

Now, if you import the partial file, omit the underscore. Sass understands that it should import the file "_colors.scss":
Example

@import "colors";

body {
font-family: Helvetica, sans-serif;
font-size: 18px;
color: $myBlue;
}

Sass @include mixin Syntax:

selector {
  @include mixin-name;
}

So, to include the important-text mixin created above:
SCSS Syntax:

.danger {
  @include important-text;
  background-color: green;
}

.danger {
  color: red;
  font-size: 25px;
  font-weight: bold;
  border: 1px solid blue;
  background-color: green;
}

A mixin can also include other mixins:
SCSS Syntax:

@mixin special-text {
  @include important-text;
  @include link;
  @include special-border;
}

SCSS Syntax:

/* Define mixin with two arguments */
@mixin bordered($color, $width) {
  border: $width solid $color;
}

.myArticle {
  @include bordered(blue, 1px);  // Call mixin with two values
}

.myNotes {
  @include bordered(red, 2px); // Call mixin with two values
}

Notice that the arguments are set as variables and then used as the values (color and width) of the border property.
After compilation, the CSS will look like this:
CSS Output:

.myArticle {
  border: 1px solid blue;
}

.myNotes {
  border: 2px solid red;
}

SCSS Syntax:

@mixin bordered($color: blue, $width: 1px) {
  border: $width solid $color;

Then, you only need to specify the values that change when you include the mixin:
SCSS Syntax:

.myTips {
  @include bordered($color: orange);
}

Here is an example for transform:
SCSS Syntax

@mixin transform($property) {
  -webkit-transform: $property;
  -ms-transform: $property;
  transform: $property;
}

.myBox {
  @include transform(rotate(20deg));
}

After compilation, the CSS will look like this:
CSS Output:

.myBox {
  -webkit-transform: rotate(20deg);
  -ms-transform: rotate(20deg);
  transform: rotate(20deg);
}

		
.button-basic  {
 border: none;
 padding: 15px 30px;
 text-align: center;
 font-size: 16px;
 cursor: pointer;
}

.button-report  {
 @extend .button-basic;
 background-color: red;
}

.button-submit  {
 @extend .button-basic;
 background-color: green;
 color: white;
}	

.button-basic, .button-report, .button-submit {
 border: none;
 padding: 15px 30px;
 text-align: center;
 font-size: 16px;
 cursor: pointer;
}

.button-report  {
background-color: red;
}

.button-submit  {
 background-color: green;
 color: white;
}