What is SASS?

Sass is a preprocessor language that's interpreted into CSS. A preprocessor language takes input data and converts it to an output that's used as input by another program. This means when you run Sass code, you're actually converting your code to CSS. That CSS code output is then used directly by a browser.

Variables

Variables in CSS preprocessors such as Sass allow you to store information that you can reuse in your stylesheet, such as font stacks, colors, or any other CSS value you anticipate needing. The $ symbol is used in Sass to designate a variable.

Below is an example:

Sass 

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

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

Css 

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

Once Sass is processed, it generates standard CSS by inserting the values we assigned to variables such as $font-stack and $primary-color. This functionality can prove invaluable when dealing with brand colors and ensuring their consistency throughout the website.

Nesting

While composing HTML, you might have observed that it exhibits an explicit nested and visual structure. However, CSS lacks such a hierarchy. On the contrary, Sass allows you to nest your CSS selectors in a manner that aligns with the visual hierarchy of your HTML. Nonetheless, excessive nesting may generate overly qualified CSS, which can be challenging to maintain and is usually considered undesirable.Keeping this in consideration, here's a sample of common styles for a website's navigation:

Sass 

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

  li { display: inline-block; }

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

Css 

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

As you observe, the ul, li, and a selectors are enclosed within the nav selector. This approach is highly beneficial in arranging your CSS and enhancing its readability.

Modules

It is not mandatory to write all of your Sass code in a single file. You can divide it into multiple files as per your preference by utilizing the "@use" rule. This rule imports another Sass file as a module, enabling you to reference its variables, mixins, and functions in your Sass code using a namespace derived from the file name. Additionally, by using a file, the CSS it produces will also be included in the compiled output.

Sass 

// _base.scss
$font-stack:Helvetica, sans-serif;$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}
// styles.scss
@use 'base';

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

Css 

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

.inverse {
  background-color: #333;
  color: white;
}

Observe that in the styles.scss file, we are employing "@use 'base';". If you utilize a file, there's no requirement to add the file extension. Sass is intelligent enough to comprehend it by itself.