SASS Example

index.html

<br />
<div class="test">
  <span>Hello World. This is my first example
        of SASS/SCSS. <br/></span>
  <span>For the complete understanding, 
  <br/>please see the .SCSS file!</span>
<p>
  <a>
    <p>Link example and...</p>
    <span>Nest inside nest</span>
  </a>
</p>
</div>
<br/>
<div class="rectangle">Rectangle</div>
<br/>
<div class="test2">
  <span>Inheritance example</span>
</div>

input.scss

// ----
// Sass (v3.4.21)
// Compass (v1.0.3)
// ----

//Variable example
$font-stack: Helvetica;

//The mixin is like a function. It can be called inside any declaration
@mixin rectangle-box($width, $height) {
  width: $width / 2;
  height: $height * 4;
  border: solid black;
  background-color: orange;
}


.test {
  a{
    color: blue;
    font: 100% $font-stack;
    
    //Nesting inside nest!
    span {
      color: green;
    }
    
  }
  
  span {
    color: red;
  }
}
//Calling the mixin to a div, passing the parameters!
.rectangle{@include rectangle-box(20, 20);}

//Inheritance example
.test2{
  @extend .test;
  font-weight: 900;
}

output.css

.test a, .test2 a {
  color: blue;
  font: 100% Helvetica;
}
.test a span, .test2 a span {
  color: green;
}
.test span, .test2 span {
  color: red;
}

.rectangle {
  width: 10;
  height: 80;
  border: solid black;
  background-color: orange;
}

.test2 {
  font-weight: 900;
}