Syntactically_Awesome_Stylesheets

Introduction

SASS stands for Syntactically Awesome Stylesheets which is a CSS pre-processor. Pre-processor is simply a program that process a input data and produces an output and that output is used in another program. SASS is an extension to CSS which adds nested rules, variables, mixins, selector, inheritance, and more. If we use css, there is a situation where we have to copy the same code for multiple elements. So, css can get very disorganized and messy but SASS helps to build organized and specific module of code. With the use of variables in sass we are able to reuse the code. SASS itself has two syntax which are scss and sass. Scss stands for SASScss Scss is more like middleman between sass and css. Then, we have a actual sass file that will actually will be compiled into css file. For e.g if you have written your sass file containing bunch of variables and other features of sass, then it will goes through processor/compiler and it will give out the css which the browser will be able to read since a browser cannot read the SASS.

Features of SASS

Some of the features of the SASS is explained below:

Variables

Sass allows you to store the color value in a variable and reuse it throughout the SASS files. Imagine if you have a css file and you have given a particular color to your background-color for certain elements. Now , if there is a need of change you need to manually go through each code and change the color. But with SASS you can change the color in all elements just by changing the value of a variable. For e.g

1
2
3
4
5
6
7
8
9
$maroon: #800000;

.button1{
  bg-color: $maroon;
}

.button2{
 bg-color: $maroon;
}

Mixins

A mixins basically lets us make the group of css declaration that we can reuse throughout our site. We can pass a value to make our mixin more flexible. In order to use mixin we have to use ‘@’ along with mixin sign and give it name

1
2
3
4
5
6
7
8
9
10
@mixin example{
  width: 100%;
  height: 100%;
}
.section1{
  @include example;
}
.section2{
  @include example;
}

The above code will be translated in css as given below:

1
2
3
4
5
6
7
8
.section1{
  width: 100%;
  height:100%;
}
.section2{
  width: 100%;
  height: 100%;
}

If you want to update the default mixin values, you just need to pass the parameters within the @include call as given below:

1
2
3
.section1{
  @include example(50%,50%);
}

Nested Syntax

SASS allows you to use a nested syntax, which is a code contained inside of another piece of code. It helps to prevent the need to rewrite selector multiple times as well as help to make a hierarchial code structure. For e.g

1
2
3
4
5
6
7
8
9
.navbar{
color: blue;
  li{
    margin-left: 5px;
    a{
      text-decoration: none;
      }
    }
  }

However, it can cause the long code due to the repeated code. Selectors cannot be reused for other elements if css is declared particularly for a specific element. In above example, the defined property of a tag will not applicable to the other a tag defined inside a particular element.

Extend/Inheritance

With this feature we are able to share css property one selected to another. It is kind of similar to the mixin but is not exactly the same. For e.g

1
2
3
4
5
6
7
8
9
10
header{
  background-color: red;
  width: 100%;
  font-family: "andale mono", "lucida console", monospace;
}

footer{
  @extend header;
  background-color:blue
}

In above, the footer inherits all the property from the footer by using the keyword @extend. However, it can be override by simply definin it’s own property inside as the background-color is override in the footer in the above code.

Partials

SASS provides a very systematic technique to maintain the clear code by the use of @import rule. It helps to modularize the piece of code. For instance, there is always the probablity of the multiple lines of code in a single file, which would obviously get messy and it would be complex to search for a specific line. But using SASS we can save particular pieces to different directory and those codes can be merged in a single file using the @import feature. For e.g

1
2
3
4
5
@import "functions";
@import "variables";
@import "mixins";
@import "reboot";