Why use SCSS and how to use SCSS?

July 31, 2025
No Comments

SCSS is used to write cleaner, more organized, and maintainable CSS using features like variables, nesting, mixins, and functions. It helps in reducing code repetition and managing large stylesheets efficiently.

Benefits of Using SCSS

 

Feature Why It’s Useful
Variables Reuse values like colors, fonts, breakpoints
Nesting Write cleaner, readable CSS by nesting selectors like HTML structure
Partials & Import Split styles into files and combine them
Mixins Create reusable blocks of code (like functions in CSS)
Inheritance Use @extend to share styles between selectors
Math & Functions Do calculations (e.g., width: 100% / 3)

 

How to Use SCSS

Step 1: Install Node.js and Sass

Install Node.js from: https://nodejs.org

Then install Sass globally:

Put this comment in your project terminal:


npm install -g sass

Step 2: Create .scss File

styles.scss


// styles.scss
$primary-color: #3498db;

body {
  font-family: Arial, sans-serif;
  background-color: $primary-color;

  h1 {
    color: white;
  }
}

Step 3: Compile SCSS to CSS

Put this comment in your project terminal:


sass styles.scss styles.css

Step 4: Link the Compiled CSS in HTML

index.html


<link rel="stylesheet" href="styles.css">

SCSS Example with All Features

styles.scss


// _variables.scss
$font-stack: 'Roboto', sans-serif;
$main-color: #2c3e50;

// main.scss
@import 'variables';

body {
  font: 100% $font-stack;
  color: $main-color;

  nav {
    ul {
      margin: 0;
      padding: 0;

      li {
        display: inline-block;
      }
    }
  }
}