What you don't know about sass 🤯
Tags: webdev, sass, css, programming
Published: 2024-01-22 16:19:15

## 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.