CSS vs. SASS vs. SCSS

3 min readJan 14, 2021

When making the decision about what technology to style your application with, going with one that implements improved readability, while not venturing too far off from already known syntax is both highly appealing and desirable. SCSS (Sassy CSS) does just that, taking improvements made by SASS (Syntactically Awesome Style Sheets), while pairing down the dissimilarities syntactically from vanilla CSS — making the transition from vanilla CSS to SCSS extremely easy and worthwhile.

Benefits of SCSS syntax over SASS and CSS

Similarity to Vanilla CSS
SCSS is written virtually identically, syntax-wise, to vanilla CSS. In both CSS and SCSS, selectors (pseudo, class or id) followed by curly brackets (that wrap the entirety of the styling), with semicolons denoting the end of styling (within the curly brackets), make up the conventional syntax. This is different from SASS, which opts for newlines to represent the end of styling and doesn’t use curly brackets at all.

////////
//SCSS//
////////.button {
   cursor: pointer;
   color: red;
 }////////
//SASS//
////////.button
  cursor: pointer
  color: red///////
//CSS//
///////.button {
   cursor: pointer;
   color: red;
 }

Compatibly (SCSS and CSS)
This similarity also means that anything written in vanilla CSS is transferable to SCSS (but not to SASS). That being said, you lose out on a lot of improvements that SCSS and SASS bring to the table, using only vanilla CSS, such as…

Variables
The ability to assign variables used throughout styling, allows devs to create custom attributes that can be used over and over again without having to copy attributes such as color, margin, padding etc. …:

////////
//SCSS//
//////////variable being assigned
   $blurple: #6200ff;//variable being used
   .content-navigation {
      border-color: $blurple;
    }////////
//SASS//
//////////variable being assigned
   $blurple:#6200ff//variable being used
  .content-navigation 
      border-color: $blurple;
    
///////
//CSS//
/////////variables aren't a feature of vanilla CSS so custom color has to be assigned each time
     .content-navigation {
      border-color: #6200ff;
    }

Nested Syntax
Nested Syntax allows for more natural, maintainable, readable, organized, and overall DRYer code. Plus, it’ll save your fingers not having to write CSS selectors nearly as often.

////////
//SCSS//
////////.button {
   cursor: pointer;
   color: red;
   padding-left: 5px;
   padding-right: 10px;
 }
 .button:hover{
   cursor:pointer;
  color: tomato;
 }////////
//SASS//
////////.button
  cursor: pointer
  color: red
  padding-left: 5px
  padding-right: 10px&:hover
    cursor: pointer
    color: tomato///////
//CSS//
///////.button {
   cursor: pointer;
   color: red;
   padding-left: 5px;
   padding-right: 10px;
 }
 .button:hover{
   cursor:pointer;
  color: tomato;
 }

Math Support
Setting proportions according to mathematical equations is much simpler in SCSS. With built in math support you no longer have to remember the calc function. Simply add the equation, like so:

////////
//SCSS//
////////.cool-div { 
    width: 600px / 960px * 100%;
}////////
//SASS//
////////.cool-div
   width: 600px / 960px * 100%///////
//CSS//
///////.cool-div { 
    width: calc(600px / 960px * 100%);
}

These improvements allow for easier development and cleaner overall code. Add in the ability to do things like write reusable styling segments , share CSS properties between different selectors, and create custom functions, and you have the recipe to to a super powerful and effective CSS pre-processor.

For more information visit the official documentation. Another helpful tool I found was this SCSS/SASS converter, give it a try!

CSS vs. SASS vs. SCSS

Written by Daniel Patnode