A stitch in time saves nine.

Sass (Syntactically Awesome Style Sheets) is the most popular solution to writing well-structured, cross-browser supported CSS in the most developer friendly way possible.
Once you switch to this next level transpiling option, there is absolutely no chance that you're going back to writing styling of nested elements the way CSS forces you to

Setting up a project in Sass..

It's just about following these 4 steps that'll save you tonnes of time and energy that CSS takes up

1. Create a separate folder called sass and create a main file called styles.scss (arbitrary name) inside of it. Also, create a folder called css and create a file styles.css (arbitrary name)

2. Install a compiler

   • This can be implemented by installing the NPM package for your project
     npm i sass
   • Alternatively, depending on the IDE you use, you could simply install
     a plugin / extension that does it for you. for VSCode : Extension, for
     WebStorm : Plugin

3. Feel free to create more supporting files to compartmentalize your code into smaller CSS modules by following these 2 rules

   • The filename should be prefixed with an underscore i.e. '_' eg: _header.scss
   • This file must be imported in the scss directory using the @import option in scss.

4. Next, create a .vscode (for VSCode users) or .idea (for WebStorm users) folder where you set up a configuration file mapping the source file (styles.scss in sass folder) to the destination file (styles.css in the css folder).
   This basically just tells your transpiler to take all the code imported from separate CSS modules and the code present in your source file to be compiled into the destination CSS file that can be globally imported into your project's top level component

Significant superpowers

Sass is basically CSS with superpowers. I've listed the most common ones that you'll be working with most of the time

1. Variables

Variables are a way to store information that you want to reuse throughout your stylesheet.

You can store things like colors, font stacks, or any CSS value you think you'll want to reuse. Sass uses the $ symbol to make something a variable. Here's an example:

SCSS SYNTAX

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

CSS OUTPUT

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

• When the Sass is processed, it takes the variables we define for the $font-stack and $primary-color and outputs normal CSS with our variable values placed in the CSS.
• This can be extremely powerful when working with brand colors and keeping them consistent throughout the site.

2. Nesting

• When writing HTML you've probably noticed that it has a clear nested and visual hierarchy. CSS, on the other hand, doesn't.
• Sass will let you nest your CSS selectors in a way that follows the same visual hierarchy of your HTML. Be aware that overly nested rules will result in over-qualified CSS that could prove hard to maintain and is generally considered bad practice.
• With that in mind, here's an example of some typical styles for a site's navigation:

SCSS SYNTAX

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

CSS OUTPUT

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

You'll notice that the ul, li, and a selectors are nested inside the nav selector. This is a great way to organize your CSS and make it more readable.

3. Mixins

A mixin lets you make groups of CSS declarations that you want to reuse throughout your site.

You can even pass in values to make your mixin more flexible. A good use of a mixin is for vendor prefixes. Here's an example for transform.

SCSS SYNTAX

@mixin transform($property) {
  -webkit-transform: $property;
  -ms-transform: $property;
  transform: $property;
}
.box { @include transform(rotate(30deg)); }

CSS OUTPUT

.box {
  -webkit-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  transform: rotate(30deg);
}

• To create a mixin you use the @mixin directive and give it a name.
• We've named our mixin transform. We're also using the variable $property inside the parentheses so we can pass in a transform of whatever we want.
• After you create your mixin, you can then use it as a CSS declaration starting with @include followed by the name of the mixin.

4. Extend/Inheritance

• Using @extend lets you share a set of CSS properties from one selector to another. It helps keep your Sass very DRY (Don't Repeat Yourself).
• In our example we're going to create a simple series of messaging for errors, warnings and successes using another feature which goes hand in hand with extend, placeholder classes.
• A placeholder class is a special type of class that only prints when it is extended, and can help keep your compiled CSS neat and clean.

SCSS SYNTAX

/* This CSS will print because %message-shared is extended. */
%message-shared {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

// This CSS won't print because %equal-heights is never extended.
%equal-heights {
  display: flex;
  flex-wrap: wrap;
}

.message {
  @extend %message-shared;
}

.success {
  @extend %message-shared;
  border-color: green;
}

.error {
  @extend %message-shared;
  border-color: red;
}

.warning {
  @extend %message-shared;
  border-color: yellow;
}

• What the above code does is tells .message, .success, .error, and .warning to behave just like %message-shared.
• That means anywhere that %message-shared shows up, .message, .success, .error, & .warning will too.
• Each of these classes will get the same CSS properties as %message-shared. This helps you avoid having to write multiple class names on HTML elements.
• Note that the CSS in %equal-heights isn't generated, because %equal-heights is never extended.

Evidence ..

This is how you can get upto 95% reduction in the number of lines you code by writing styling in Sass instead of CSS

Conclusion...

And that is how, in 5 easy steps, you go from a junior developer to an experienced frontend engineer writing extensible, reusable, readable code that is enjoyable to read and work upon !

If you're interested in checking out more of the CSS superpowers that Sass and other CSS language extensions like Less grant, I would highly recommend you to go read their own beautifully written and explained docs.