SASS

SASS is a preprocessor, such as the Less and the Stylus. Particularly I prefer to use SASS, so it's about he we are going to talk about in this article. But why use a preprocessor? In this article, we'll look at some of the features which SASS offers to solve some problems that in CSS is not possible.

Variables

A well-known problem in the programming world is DRY (Do not repeat yourself), variables in Sass help us solve of this issue. Let's see, for example, the use of colors in CSS:

.header {
  color: #000;
  background-color: #fff;
}

.links{
  color: #000;
}

.footer{
  background-color: #fff;
}

By analyzing this code, you can see that the hexadecimal value of some colors is repeated, now imagine if someone is requesting a background change in the "header" and "footer", you would have to change it in two different places and depending of the project and request, would be a very dull task. With SASS we can resolve this issue quickly and very effectively.

$defalt-color: #000;
$bk-color: #fff;

.header {
...
color: $defalt-color;
background-color: $bk-color;
...
}

.links{
...
color: $defalt-color;
...
}

.footer{
...
background-color: $bk-color;
...
}

Mixins

The features that mixins offer are extremely important, because with them we can define styles and reuse them in our code. Inside a mixin can contain many rules, but ideally it is not very extensive, it should be simple and functional.

/**
 * Creating mixin
 */

@mixin rounded-border($radius: 0.2em) {
border-radius: $radius
}

/**
 * including Mixin with default value
 */

.button {
...
@include rounded-border;
...
}


/**
 * Including mixin with another value
 */

.card {
...
@include rounded-border(0.5em);
...
}

An effective way to create a mixin is by passing a default value as an argument, so you can use the mixin with value standard for a particular component and if you need to reuse the mixin in another component, just inform the new value between relatives as in the above code.

@extend

@extend has an interesting feature where you can create a class or ID with the CSS rules you want and to use, simply use "@extend + class". As the name says, it will extend the class or ID with the rules CSS and when generated the CSS file at the beginning of the file will contain the name of the extend accompanied by all locations where he was called.

  .shadow {
    -webkit-box-shadow: 0 2px 5px 0.3px rgba(0, 0, 0, 0.4);
    box-shadow: 0 2px 5px 0.3px rgba(0, 0, 0, 0.4);
  }

  .card {
    ...
    @extend .shadow
    ...
  }

%placeholder

The placeholder is also very useful and one of the differences between "placeholders" and "mixins", is that in mixin we can enter default values because it works with "@include". Already in the placeholder we use "@ extend" where you do not have support for receiving values. So if you need to spend any amount, the mixin is more advisable, otherwise you can use the placeholder as follows:

%shadow {
-webkit-box-shadow: 0 2px 5px 0.3px rgba(0, 0, 0, 0.4);
box-shadow: 0 2px 5px 0.3px rgba(0, 0, 0, 0.4);
}

.card {
...
@extend %shadow
...
}

The placeholder has a feature known as "silent class", because when generated the CSS code, the placeholder is hidden, only showing where it has been inserted, the opposite of "@extend".

Conclusion

These are just a few of the many features that SASS provides to streamline the development process, leaving our code more performative. It is worth checking the documentation directly on the SASS and know a little more about the power it offers.

Thanks!!