A complete guide to Sass

Sass (Syntactically Awesome Stylesheets) is the most mature, stable, and powerful professional grade CSS extension language in the world. In simple words it splits a single CSS file to make it easy, readable, editable, structured, and understandable. However we compile our sass code to CSS to run on a website.

What is a CSS preprocessor?

A CSS preprocessor is a scripting language that extends CSS by allowing developers to write code in one language and then compile it into CSS. Sass is perhaps the most popular preprocessor around right now, but other well-known examples include Less and Stylus.

Sass vs Scss

There are two syntaxes available for Sass. 1) SCSS and 2) Sass

1. SCSS known as Sassy CSS is a newer and most used version of Sass. It has a similar syntax to CSS because it’s a language extension or a superset of CSS. So a valid CSS is also a valid SCSS. Its file extension is .scss.
2. Sass is an older syntax of Sass. It uses indentation rather than brackets. Its file extension is .sass.

If you know CSS, you know SASS. You cant learn Scss directly. If you are new to Web development then you need learn CSS before you get started into Scss.

Variables - Reusable Color Scheming

Think of variables as 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. This can be extremely powerful when working with brand colors and keeping them consistent throughout the site.

Example:

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

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

// Math variables
@use "sass:math" as math;

//Scope of a variable
nav{
    $bg-color: red;
    color: $bg-color; //red
    .cta{
            $bg-color: green;
            color: $bg-color;  //green
    }
}

Nesting

Sass will let you nest your CSS selectors in a way that follows the same visual hierarchy of your HTML. But don't nest too much of code (which results in large CSS file and affects your rendering performance) its a bad practice.

The Inception Rule: don’t go more than four levels deep.

Benefits of nesting:

• More natural syntax and easy to read in most cases
• Prevents the need to rewrite selectors multiple times
• Better code organization and structure thanks to its visual hierarchy, which bring us to...
• More maintainable code.

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

  li { display: inline-block; }

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

There are often cases when designing a page when one class should have all the styles of another class, as well as its own specific styles. For example, the BEM methodology encourages modifier classes that go on the same elements as block or element classes. But this can create cluttered HTML, it's prone to errors from forgetting to include both classes, and it can bring non-semantic style concerns into your markup.

.error {
  border: 1px #f00;
  background-color: #fdd;
  &--serious {
    @extend .error;
    border-width: 3px;
  }
}
/* OUTPUT
.error, .error--serious {
  border: 1px #f00;
  background-color: #fdd;
}
.error--serious {
  border-width: 3px;
}
*/

Again! Don’t Repeat Yourself: Mixins and Extends

Mixins allow you to define styles that can be re-used throughout your stylesheet. You can also pass arguments to @mixins functions.

@mixin reset-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

@mixin horizontal-list {
  @include reset-list;

  li {
    display: inline-block;
    margin: {
      left: -2px;
      right: 2em;
    }
  }
}

nav ul {
  @include horizontal-list;

/* OUTPUT
nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav ul li {
  display: inline-block;
  margin-left: -2px;
  margin-right: 2em;
}
*/

You can pass content using @content tag know as content block.

@mixin hover {
  &:not([disabled]):hover {
    @content;
  }
}

.button {
  border: 1px solid black;
  @include hover {
    border-width: 2px;
  }
}
/* OUTPUT
.button {
  border: 1px solid black;
}
.button:not([disabled]):hover {
  border-width: 2px;
}
*/

Partials and Import

Just like CSS, Sass also supports the @import directive. The @import directive allows you to include the content of one file in another.

A partial is a Sass file named with a leading underscore. You might name it something like _partial.scss. The underscore lets Sass know that the file is only a partial file and that it should not be generated into a CSS file. Sass partials are used with the @use rule.

Ampersand (&) operator (a.k.a parent selector)

The & is an extremely useful feature in Sass. It's used when nesting. It can be a nice time-saver when you know how and where to use it. This operator just holds the parent name (with grand parent if available). This is also useful when using a methodology like BEM that uses highly structured class names.

.alert {
  &:hover {  // `.alert:hover`
    font-weight: bold;
  }
  button & {   // `button .alert`
    margin-left: 0;
    margin-right: 10px;
  }
}
.grand-parent {
  .parent {
    &(1) .child {} // Trying to get `.parent`, not `.grand-parent .parent`
  }
}
header{
    background:#fff;
    &--dark{
        background:#fff;   // Compiled as `header--dark{ ...
    }
}

Mathematical Operations

CSS calc() function allows us to perform basic calculation. But scss have more functionalities. You can do arithmetic ( +, -, *, /, % ), equality, boolean and conditional operations.

@debug 1px == 1px; // true
@debug hsl(34, 35%, 92.1%) == #f2ece4; // true
@debug 1000ms <= 1s; // true
@debug 1in + 6px; // 102px or 1.0625in
@debug "Elapsed time: " + 10s; // "Elapsed time: 10s";
@debug true and false; // false

If unit-less numbers are compared with any number they’re automatically converted to that number’s unit.

Fun fact: You can add two colors to get a new color

Build in functions

Sass provides the following built-in modules:

• The sass:math module provides functions that operate on numbers.
• The sass:string module makes it easy to combine, search, or split apart strings.
• The sass:color module generates new colors based on existing ones, making it easy to build color themes.
• The sass:list module lets you access and modify values in lists.
• The sass:map module makes it possible to look up the value associated with a key in a map, and much more.
• The sass:selector module provides access to Sass’s powerful selector engine.
• The sass:meta module exposes the details of Sass’s inner workings.

Directives

There are many directives in Sass. For example, @extend, @mixin, and @import are some of the directives that we have seen above. There are many more directives in Sass, such as @if, @else, @for, @while.

1. The @if directive takes a Sass expression and executes the block of styles beneath the directive if the evaluation of the expression does not return false or null.

h3 {
        @if($theme == "dark") { color: white;}
        @if(true) {font-size: 24px;}
        @if($theme == "light") {color: blue;}
        @if(false) {font-size: 30px;}   
    }

2. You can also add @else if and @else statements for conditional validation

3. The @for directive is used to output styles in a loop. This loop has a start and end value. You can five start and end value to run the loop. While through loops and includes the end point ( i <= 5 ), to does not include the end value similar to $i < 5 .

@for $i from 1 through 5 {
        .pad-#{$i} { padding: 10 * $i+px;}
}

The @each directive is used to loop through a list or map instead of starting and ending values as in the case of @for. Its syntax is @each $var in <list> where $var can be the name of any variable like $name or $animal. You can also use multiple variables, map in @each function

@each $sec in home, service, contact {
    .place-#{$sec} {
            background-image: url("img/#{$sec}.jpg" );
    } 
}
/*  OUTPUT
.place-home{
    background-image: url("img/home.jpg" );
}
.place-service{
    background-image: url("img/service.jpg" );
}
.place-contact{
    background-image: url("img/contact.jpg" );
}
*/

Keep Your Responsive Design Project More Organized - You can divide and conquer

Organize all your scss files which makes your co-developer easy to understand. The standard and preferable method of a scss file is mentioned below.

Source : Scss folder structure

At last we have large community and support.

Almost every CSS framework link Bootstrap, Material are available in scss and you can easily customize (import only what you needed) those frameworks as per you like.

Happy coding with Scss 🥳