What is a CSS Preprocessor?

A CSS preprocessors are scripting language that are extend the CSS capabilities and then compiles it into regular CSS, there are many CSS preprocessors to choose from, Most of CSS preprocessor are having some features that don't exist in pure CSS, those feature and structure are make more readable, easier to maintain and light weight.

A preprocessors extend CSS with variables, operators, interpolations, functions, mixing many more reused assets we can use it on preprocessors. LESS, SASS and Stylus are the well known preprocessors in market.

Only writing CSS is quite repetitive/monotonous and having more task to look up on value, tags, closing brackets etc... For bigger project, any other complex system, maintenance is very hard and big problem. CSS are time consuming and its effect on loading time of websites.

What is SASS?

SASS (Syntactically Awesome Style Sheet) is a CSS pre-processor. The SASS pre - processor has to reduce repetition of CSS and save out time. It is more stable and powerful CSS extension language that describe the style of document structure.

Style sheets are getting larger, more complex, harder to maintain and boring for a new resource to understand. This is where pre-processor can help.

Once SASS is installed in your project, you can compile your SASS to CSS using the some compiler or sass command. You need to set path and tell to SASS, which file to build from, and where to output CSS.

CSS extension can be used to enhance the functionality of the web page. Following points are some of the CSS extensions used in SASS.

• variables:
  
  SASS is allowed to be defined as variables in SASS with using an at sign ($). Once we assign value using variables we can reuse that variables is infinite times and that value is loaded single time in the stylesheet.
  
  

  $green-color: #4D926F;
  
  #header {
    color: $green-color;
  }
  h2 {
    color: $green-color;
  }
  ​

  The code above in SASS would compile to the following CSS code.

  #header {
    color: #4D926F;
  }
  
  h2 {
    color: #4D926F;
  }
  

• Nesting
  
  Nesting providing excellent method to write your code with less number of lines of code. SASS will let you nesting your CSS code selectors in a way you are following in the same visual hierarchy of your HTML.
  
  

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

• Reference symbol
  
  Firstly, you can neatly nest pseudo-states or elements, but now with SASS when nesting you can use "&" symbol to reference the parent class or ID in SASS.
  

  .foo {
   background-color: red;
   &:hover { background-color: blue; }
   &:after { content: 'bar'; } 
  }
  ​

• Mixins
  
  SASS Mixin bring the power to reusable code from exiting SASS CSS. Rather than having to go throughout stylesheet and change multiple places and it was not much harder to handle every code was replaced successfully.
  
  In mixing you need to change in a single place and value will be applied for throughout the stylesheet. This method is to make it more clean stylesheet and least number of lines to write again and again.
  
  

  @mixin foo() {
   border: 1px solid red;
  }
  .bar {
   @include foo();
  }
  

  You can also set parameters in mixing to reuse same styles, but with slight adjustment based on your requirement, event you can set default parameters for those arguments.

  @mixin foo($width: 1px, $color: red) {
   border: 1px solid red;
  }
  .bar {
   @include foo();
  }
  .bax {
   @include foo(5px, blue);
  }
  

• Import
  
  You should thank to SASS to allow to create multiple files, and then use @import to combine it with the file you're import into so you can serve a single CSS file call to your web browser.
  Let's understand with an example to import multiple files in single stlyesheet. You have SASS files _reset.scss, _base.scss. we want to import _reset.scss and _base.scss into main.scss file.
  
  

  @import '_reset';
  @import '_base';

  Just like @extend, you can import multiple imports using a comma-separated list:
  
  

  @import '_reset',  '_base';

• Operators
  
  SASS provides operators which more interesting to perform math calculations in CSS. SASS has a handful of standard math operators like -, %, +, *.
  In our example we are going to perform simple math calculation widths for an article and aside.

  .container {
    width: 100%;
  }
  
  article[role="one"] {
    width: 550px / 1170px * 100%;
  }
  
  aside[role="two"] {
    width: 280px / 1170px * 100%;
  }
  

  
  We've created a simple example using fluid width, based on 1170px. Operation in SASS lets us do something in pixel value and convent them to percentages as an output without any problem.