What is SCSS/SASS ? Why SCSS ? (Syntactically Awesome Style Sheets/Sassy Sass)

Sass (Syntactically awesome style sheets) is the is a CSS pre-processor. 

What is preprocessor?
A preprocessor is a program that processes its input data to produce output that is used as input to another program.

  • So, output that SASS will generate will be the input of the CSS.
What is SASS?
CSS + Some awesome,powerful features = SASS

SCSS is the new version of the Sass.

What of SCSS?
SCSS  = SASS + more easy,clear,clean syntax.

SCSS files need to be converted into CSS by the compiler or webpack before using it.

Files syntax and extension:

  • SCSS called as "Sassy Sass" is the new extension Sass files (.scss).
  • ".sass" is the order syntax of the Sass files.

SCSS vs SASS
There are minor syntax changes between the SCSS and SASS. The syntax of SCSS is much more similar to the CSS.

The major features of SCSS(Sass) includes:-
  • Variables
  • Inheritance
  • Nesting of elements
  • Mixins
  • Operators
  • Partials
  • Import/Export of files


Variables

A value can be assigned to the variable and it can be used in the file anywhere simply.

Syntax : $variableName = value

Example :

$headingColor: #0000CD;
$basicWidth:2em;

p {
  color: $headingColor;
  font-size:$basicWidth;
}

 h1 {
   float:left;
   color:$headingColor;

}

Advantages :
  •  Easy to make changes. Change in one value will impact others too.
  •  Less typing
  •  Less redundancy

Inheritance

We can import the styling properties of the other elements and reuse them to apply styling to the other elements.

 Syntax: @extend nameOfTheElement

 Example :

 If we had applied some styling to the tag 'p' then we can import the styling of tag 'p' to reuse it in other elements too ('h2' in below example).

 $headingColor: #0000CD;
$headingSize:2em;

 p {
 color: $headingColor;
 font-size:$headingSize;
}

 h2 {
 @extend p;
 float:right;
}

Advantages :
  •  Less typing.
  •  Less redundancy. 

Nesting of elements

Elements can be nested in each other to apply styling.

 Example :

 If we want to apply the styling to the tags 'p' and 'h1' which is inside the class name 'bottom' and 'bottom' class is inside the tag 'footer'.

 Then we can do it like this :

 $headingColor: #0000CD;
$headingSize:2em;

 footer {
.bottom {
    p {
       color: $headingColor;
       font-size:$headingSize;
       }
     h1 {
          background-color:black;
          }
       }
}
Advantages :
  •  Easy to point specific elements.
  •  Less use of div.
  •  Easy to perform complex stylings.


Mixins

These are used to group the set of styling statements.
Its functionality is just like a function.

 Values can also be passed to the Mixins, just like passing data to a function.

Syntax:

 To declare a mixin : @mixin mixinName() { }
To use mixin         : @include mixinName();

 Example-1 (Without passing values)

 @mixin alertMsg()
{
font-size:20px;
text-align:center;
}

 .successMsg { @include alertMsg();  color:red; }

 .errorMsg     { @include alertMsg(); color:green;  }
Example-2 (By passing the values)

 @mixin alertMsg($theColor)
{
   font-size:20px;
   text-align:center;
  color:$theColor;
}

.successMsg { @include alertMsg(green);}
.errorMsg   { @include alertMsg(red); }
Advantages :
  •  Reusability.
  •  Dynamic designing.

Operators

We can also perform calculations using the mathematical operators +, -, *, /, and %.

Example :

 $headingColor: #0000CD;
$basicWidth:40px;

 p {
color: $headingColor;
font-size:$basicWidth/2;
}

 a {
font-size:$basicWidth*1.5;
}
Advantages :

  •  Easy to perform complex tasks.
  •  Dynamic designing without using any scripting language.