CSS TO SASS….

2 min readApr 21, 2021

What is SASS ?

Sass stands for Syntactically Awesome Stylesheet. Sass is an extension to CSS, it is a CSS Pre-processor and is completely compatible with all versions of CSS. In this blog we are discussing about some core features of SCSS.

Sass reduces repetition of CSS and therefore saves time. Sass is free to download and use. You can install Sass from https://sass-lang.com/install

VARIABLES

Variables is used store information that you can re-use later.

With Sass, you can store information in variables, like:

strings
numbers
colors
boolean
lists
nulls

Sass uses the $ symbol, followed by a name

CSS
body{ 
 font: 100% Helvetica, sans-serif;
 color: #333;
}SCSS$font-stack: Helvetica, sans-serif
$primary-color: #333;body{
  font: 100% $font-stack
  color: $primary-color
}

NESTING

CSS
nav ul{
  margin: 0;
  padding: 0;
}
nav li{
  display: inline-block;
}
nav a{
 color: #f2f2f2;
 display: block;
}
SCSS
nav{
  ul{
   margin: 0;
   padding: 0;
  }
  li{
  display: inline-block;
  }
  a{
   color: #f2f2f2;
   display: block;
  }
}

code is more readable now !!

MIXINS

The @mixin directive lets you create CSS code that is to be reused throughout the website.

CSS
.danger{
  color: red;
  font-size: 25px;
}SCSS@mixin important-text {
 color: red;
 font-size: 25px;
 }

MODULES

Think a scenario.. If there is 500 lines of code in scss file and you have to change some css so it’s tired task right ? so, SCSS provides a features like Modules.

You don’t have to write all your Sass in a single file. You can split it up however you want with the @use rule. This rule loads another Sass file as a module, which means you can refer to its variables, mixins, and functions in your Sass file with a namespace based on the filename.

CSSbody {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

.inverse {
  background-color: #333;
  color: white;
}SCSS
File name: common.scss$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}File name: home.scss@use 'base';

.inverse {
  background-color: base.$primary-color;
  color: white;
}

INHERITANCE

SCSS also provide inheritance featured by using @extend keyword.

The @extend directive lets you share a set of CSS properties from one selector to another.

CSS.button-basic, .button-report, .button-submit {
  border: none;
  padding: 15px 30px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
}

.button-report  {
  background-color: red;
}

.button-submit  {
  background-color: green;
  color: white;
}SCSS.button-basic  {
  border: none;
  padding: 15px 30px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
}

.button-report  {
  @extend .button-basic;
  background-color: red;
}

.button-submit  {
  @extend .button-basic;
  background-color: green;
  color: white;
}

Thank you