What you don't know about sass 🤯

What is sass ?!

SASS is a CSS pre-processor, A pre-processor is scripting languages that extend the default capabilities of CSS, Like adding logic to it as it is programming language and some special features, we'll talk about them in a minute.

Importance and main usages of SASS

One major benefit of using SASS is that it provides developers with a way to organize their stylesheets into individual files and partials, which makes the code easier to read, maintain, and reuse. With Sass, you can break up your stylesheets into smaller components that can be easily imported into other files.

It enables you to handle typography, layouts, variables and grids in one of the best shapes.

SASS vs CSS

First, CSS does not give you the flexibility in managing variables, also one of CSS biggest disadvantages is, when you're doing nesting you should repeat yourself in writing the class names many times, like this:

.parent {
  /* your CSS code */
}

.parent .child {
  /* your CSS code */
}

.prent .child .grandChild {
  /* your CSS code */
}

Main SASS Advantages:

Now let's take a closer look on SASS advantages versus CSS.

Nesting class names

In SASS you're not forced to do these dummy nesting I mentioned previously 👆
You can nest your class names in more elegant way now:

.parent {

  /* CSS code */

  .child {

     /* your CSS code */

     .grandChild {

         /* your CSS code */

    }
  }
}

And also you can benifit from this in the BEM naming technique, Let's see how ?!

If you have the parent div named parent and it's child named parent__child (with double underscore)

You can use it in the sass code like this:

.parent {
  /* parent CSS code */

  &__child {
   /* child CSS code */
 }

}

Maps

Like many programming languages, in SASS you have the ability to create a map where you can set key, value pairs and access them or loop over them.

// color palette
$colors: (
  "primary": #FFFFFF,
  "secondary": #FFFFFF,
  "error": #FFFFFF,
  "info": #FFFFFF,
);

// You can use it like this to get the value of the key `primary`

$primary-color: map-get($colors, "primary");

// OR

.container {
  background-color: map-get($colors, "primary");
}

Loops

In SASS you use @each and @for to make loops over specific number of items and maybe generate some utility classes:

@for $i from 1 through 12 {
  .col-#{$i}-xs {
   box-sizing: border-box;
   flex-grow: 0;
   width: math.div($i * 100%, $grid-columns);
 }
}

This code is going to generate the following classes
.col-1-xs
.col-2-xs
...
.col-12-xs

Conditions

You can use @if statement in your SASS code to conditionally set CSS properties:

@if ($k == "default") {
 .#{$prefix} {
   #{$property}: $v;
 }
} @else {
 .#{$prefix}-#{$k} {
   #{$property}: $v;
 }
}

Functions

In SASS you can use functions to manipulate colors, sizes, or any other css properties and return them.

Here is an example for a function that lighten and reverse specific colors using two methods in sass complement and lighten :

@function light-comp($color) {
  $complement: complement($color);
  $light-complement: lighten($complement, 30%);
  @return $light-complement;
}

Conclusion

SASS is a powerful CSS pre-processor that you can use to build modern themes and layouts, also you can build your own CSS custom library using it, like your own version of Bootstrap, and It can reduce your CSS code much more than you think and make it cleaner and more organized.

Comments

[Saif Mohamed]

I hope you liked the article