Variables - Chapter 2

Lets jump to the next feature - variables.
Just like we have variables in Javascript, we can use variables to hold colors, font sizes, margins, paddings, image urls, media query break-points, and what not, an entire media query itself.

A very handy site which we can use quickly to verify the css output corresponding to out .scss partials would be : Sassmeister.

In SASS, a variable is defined using a DOLLAR symbol.

  /* _home.scss */
  $main-body-color: #004c70;
  html{
    height:100%;
  }
  body{
    min-height:100%;
    background-color:$main-body-color;   
  }
  header{
    border:1px solid $main-body-color; 
  }

Here, we have created a variable, and the same variable is being used in multiple places so that a change in the variable will cascade the value at all places the same is referred. This becomes extremely handy when there is a theming requirement and all we need to do is update the variables with new set of color combos and boooom! we have a brand new look and feel of an existing site.

Few other usages includes:

 /* Variables*/
 $main-body-color: #004c70;
 $main-font-size: 16px;
 $container-gap:20px;
 $placeholder-url: "img/thumbnails/";
 $tablet-breakpoint: 768px;
 $mobile-breakpoint: 480px;
 $tablet-mq: "screen and (max-width: 980px)";
 $mobile-mq: "screen and (max-width: 480px)";

That concludes the variables section.