30 Nov 2021 by Vinay Ranjan

sass scss css

Difference Between SASS and SCSS #

Sass stands for Syntactically Awesome Stylesheet

It has two type of syntaxes:

• SASS
• SCSS ( Sassy CSS )

SCSS is a superset of CSS which means that SCSS contains all the existing features of CSS but with more adavnced features like variables, nesting, functions, mixins and many more.

/* SASS Syntax */
$color: #fff;

h1
  color: $color
  font-family: sans-serif
   a
    color: $color
    font-size: 12px

/* SCSS Syntax */
$color: #fff;

h1 {
  color: $color;
  font-family: sans-serif;
  a {
    color: $color;
    font-size: 12px;
  }
}

How to get started with SASS #

• Install SASS Compiler - SASS Compiler

• After installing extension you will get watch sass option at the bottom of the vscode so that you can see the changes live.

• Now make a new directory and create a file with .scss extension.

• Now open the file and write the code and don’t forget to run the compiler.

• After compiling you will get the compiled .css and .css.map file in the same directory or in which you want the output.

Features of SCSS

1. Variables

/* 

Declaration of the variable
- Starts with $
- Then name of the variable
- Can be used anywhere in the code again and again

*/
$color-white: #fff;
$font-family-sans-serif: sans-serif;

2. Nesting

/* 
- Nesting is the process of grouping together related CSS rules.
- It is done using curly braces {}.
*/

h1 {
  color: $color-white;
  font-family: $font-family-sans-serif;
  a {
    margin: 2px;
    img {
      height: 10px;
      width: 10px;
    }
  }
}

3. Mixins

/* Mixins are reusable pieces of code.*/

@mixin margin-padding($value) {
  margin: $value;
  padding: $value;
}

/* use of mixins in the code - We can use the mixins with the @include tag like */

body {
  @include margin-padding(10px);
}

4. Functions

@function generateGreyColor($value) {
  @return $value + rgb(0, 50, 0);
}

span {
  background: generateGreyColor(gray);
}

5. Control Directives

/* @If */
@mixin textColor($message) {
  @if $message == error {
    color: red;
  } @else if $message == warning {
    color: yellow;
  } @else if $message == success {
    color: green;
  } @else {
    color: blue;
  }
}

/* @For */
$columns: 5;

@for $i from 1 through $columns {
  .columns-#{$i} {
    width: (100% / $i);
  }
}

/* @Each */
$colors: (
  "red": red,
  "yellow": yellow,
  "green": green,
);

@each $color, $i in $colors {
  .text-bg-#{$color} {
    background-color: $i;
  }
  .text-#{$color} {
    color: $i;
  }
}

/* @while */
$counter: 0;
@while $counter < 5 {
  .width-#{$counter} {
    width: (10 * $counter) + px;
  }

  $counter: $counter + 1;
}