Mytypings.com

What is SCSS

SCSS is an advanced version of SASS, which stands for Syntactically Awesome Style Sheet. It is a CSS preprocessor language. SCSS provides many features like variable, operator, mixin etc just like other programming language does. It reduces the CSS development time to a large degree.

How to install it with NPM (Node Package Manager)

The following are steps to setup SCSS in Linux

Step 1:
Install Ruby using an apt package manager, rbenv, or rvm

Step 2:
Install sass using the following command

 sudo su -c "gem install sass"  

Step 3:
Following is a sample command for converting the SCSS to CSS code. Let’s start by creating a file with .SCSS extension and add the SCSS code.

 sass input.scss output.css  

Features of SCSS

Variable

Variables are used to store some information, which can be used in our code where ever we want. SCSS uses `$` symbol to declare the variable.

 $bodycolor: #333;  
 body {  
  color: $bodycolor;  
 }  

Operator

SCSS provides basic mathematical operators like +, -, *, / and %. These are extremely useful in CSS styling process.

 .divwidth {  
  width: 900px / 360px;  
 }  

Mixins

A mixin is a block of CSS statements that can be used repeatedly in a program. This feature allows us to reduce the repeated CSS codes. Using `@mixin`, we can create mixin and use `@include` to add that mixin within our code.

 @mixin box($wdvar) {  
  width: $wdvar;  
 }  
 .smallbox { @include box(10px); }  
 .largebox { @include box(100px); }  

Inheritance

It is one of the important feature in SCSS. Using @extend keyword we can share a set of CSS properties from one selector to another.

 .classone {  
  color: #333;  
 }  
 .classtwo {  
  @extend .classone;  
  border-color: green;  
 }  

Nesting

SCSS allow us to nest our CSS selectors in a way that follows the same visual hierarchy of our HTML.

 .classone {  
   font-color: blue;  
   a {  
   text-decoration: none;  
  }  
 }