Sass(Syntactically Awesome Style Sheets) is the most mature, stable, and powerful professional grade CSS extension language in the world.


  • CSS Compatible: Sass is completely compatible with all versions of CSS.
  • Mature: Sass has been actively supported for about 12 years by its loving Core Team.
  • Frameworks: Popular frameworks built with Sass -> Compass, Bourbon, and Susy.
  • Nesting: HTML elements are nested. But CSS elements are not nested by default. Saas provides a way to nesting elements.
  • Variables
  • Math operators
  • Mixin
  • Condition
  • Loop
  • Partial and import
  • Extends

alt oh-my-zsh terminal

Variables in Saas

  • Saas can use variables to set and store data.
  • Variables start with a $ followed by the variable name.
  • Use colon instead of equal sign for assignment.
  • Example

    $main-fonts: Arial, sans-serif;
    $headings-color: green;
    h1 {
      font-family: $main-fonts;
      color: $headings-color;

Nesting Elements

  • Saas allows nesting of CSS rules to organize the style sheet.
  • CSS rules:

    nav {
      background-color: red;
    nav ul {
      list-style: none;
    nav ul li {
      display: inline-block;
  • Equivalent Saas implementation:

    nav {
      background-color: red;
      ul {
        list-style: none;
        li {
          display: inline-block;


  • A mixin is a group of CSS rules that can be reused.
  • It accepts any number of variables as parameter.
  • Mixin starts with a @mixin followed by the mixin name.
  • The parameters are given between the parentheses.
  • Mixin can be used as a CSS declaration starting with @include followed by the name of the mixin.
  • Mixin declaration:

    @mixin box-shadow($x, $y, $blur, $c){
      -webkit-box-shadow: $x, $y, $blur, $c;
      -moz-box-shadow: $x, $y, $blur, $c;
      -ms-box-shadow: $x, $y, $blur, $c;
      box-shadow: $x, $y, $blur, $c;
  • Use declared mixin:

      div {
        @include box-shadow(0px, 0px, 4px, #fff);
        color: black;


  • We can use if - else if - else condition in Saas using @if directive.
  • Example of conditions:

    @mixin text-effect($val) {
      @if $val == danger {
        color: red;
      @else if $val == alert {
        color: yellow;
      @else if $val == success {
        color: green;
      @else {
        color: black;


  • Partials allow to create separate files that hold segements of CSS code.
  • This is an excellent way to group similar code into a module.
  • Names for partials start with underscore (_) character.
  • Saas compiler does not compile partials into CSS.
  • Example of a partial named _reset.scss:

    // _reset.scss
      margin:  0;
      padding: 0;


  • @import directive is used to load partial into another Sass file.
  • Example of importing a partial named _reset.scss in another file called base.scss:

    // base.scss
    @import 'reset';
    body {
      font: 100% Helvetica, sans-serif;
      background-color: #efefef;


  • @extend directive lets to extend an existing CSS rule in another.
  • Example of extending a CSS selector rule in another selector rule:

      background-color: red;
      height: 70px;
      border: 2px solid green;
      @extend .panel;
      width: 150px;
      font-size: 2em;
  • Example of using placeholder:

    %message-shared {
      border: 1px solid #ccc;
      padding: 10px;
      color: #333;
    .success {
      @extend %message-shared;
      border-color: green;
    .error {
      @extend %message-shared;
      border-color: red;
    • A placeholder class is a special type of class that can help keep compiled CSS neat and clean.
    • Placeholder class starts with the percent character (%).
    • Placeholder classes are not printed in compiles CSS.
    • In the previous example, message-shared placeholder class will not present in the compiles CSS.




APA Style
Shovon, A. R. (2019, May 6). Basic features of Saas with example. Ahmedur Rahman Shovon. Retrieved May 21, 2024, from
MLA Style
Shovon, Ahmedur Rahman. “Basic features of Saas with example.” Ahmedur Rahman Shovon, 6 May. 2019. Web. 21 May. 2024.
BibTeX entry
@misc{ shovon_2019,
    author = "Shovon, Ahmedur Rahman",
    title = "Basic features of Saas with example",
    year = "2019",
    url = "",
    note = "[Online; accessed 21-May-2024; URL:]"
Basic features of Saas with example
Basic features of Saas with example