3 min to read

SASS Powers!

Featured image

Hi friends! Today I feel like writing about one of the 7 wonders of the world:enter image description here

As you already know, SASS is a preprocessor that allows us to manipulate our CSS from friendlier way and with super powers, yes, you read that right.

My idea in this blog is to share small doses of technical bases, tips or even experiences while we add a little magic and #code :)

Let’s start with… $variables? And daaaale!

variables

Variables in SASS are quite useful as they allow us to manipulate and scale our CSS using dynamic values. For example, the classic usage is seen in $colors. Personally, I use the Name That Color color naming tool in almost all my projects.

Our color palette in projects is usually small/medium, but the variety of colors on the web is also incredible, so it is a tool that helps us a lot to manage their names. In this way, we can have in a _variables.scss file something like:

$cornflower-blue: #6195ED;
$nepal: #8B9DBB;
$crimson: #D51A49;

Likewise, we can apply these variables for any value that comes to mind, for example $grid, $font-size, $margins, $flex-property, $base-width, the name of the variable is chosen by us as always, but the The idea is to see how flexible and useful it can be for our styles to implement dynamic values ​​of certain aspects, we will see it more clearly and in detail in the Mixins section of the next post!

For us to appreciate the concept and powaaaa, we can think of a re-branding or theming of a project, modifying each hexa and color would be a headache, not to mention visual changes at the general pixel level… instead, if we use unified variables in layouts, a theming or design customization would be much simpler, more agile and more flexible to implement and scale.

enter image description here

Importing

Just as we can import the _variable.scss file that we talked about earlier, thanks to the power of SASS, we can now use those variables that we declare throughout our entire project. We just have to keep in mind that we can import directly with paths or we can use something like an index. If we add a _index.scss in any folder, we are going to put styles in it with the following line:

     @import 'variables';

When we want to import the styles folder, it will automatically take the index.scss, which in turn will take its corresponding import (variables in this case). So conceptually, by importing the styles folder, we already know that we will have free access to the variables :D

     @import 'styles';

nesting

Another beauty that SASS gives us enter image description here

Thanks to nesting we no longer need to explicitly write all the classes or selectors there are and because there is, every time we want to do something, we are going to see a brief and clear example:

For a navigation, before we had to do:

nav ul {
    bla bla bla
}
nav li {
    display: inline-block
}
nav a {
    display: block;
}

Instead with SASS, we can translate that into:

nav {
    ul {
	    bla bla bla
	}
    li {
      display: inline-block
    }
    a {
	  display: block;
	}
}

The code is much more readable this way, as we get used to it, even if we change projects/teams etc, we can understand these nests and quickly find what we are looking for. And if we add to this the BEM methodology, it’s like touching the sky with your hands, ah, what happened hahahahaha, we’ll leave that for the next post, so as not to extend this little reading See you soon, happy coding!

enter image description here