taking more advantage of SASS

Index

1. Introduction
2. Darken and lighten
3. Map
4. Each
5. If
6. Function

Introduction

That the pre processors make our lives more easier in time to create interfaces isn’t new, the use of then is already common even in small applications. But even knowing of your large features some times we use just the more simple, alignment of selectors, $variables, @mixins, %placeholders.

In this posts I will address other features much utils that we can take more advantage when we use SASS, like @function, @each, @if, map, map-get, darken, lighten.

Darken and lighten

We can get started with the most simple, the darken and the lighten has much in common, are functions that receive two parameters, the first one is a color, and the second is a value that will change this color of first parameter.

The difference you should already know, the lighten will left this color more light while the darken more dark.

Copy 
1$red: #FF0000;
2
3.box {
4  color: darken($red, 20%);
5  background-color: lighten($red, 20%);
6}

This functions are very util when you need create shadows, like in case of button creation.

Copy 
1$red: #FF0000;
2
3.btn--red {
4  background-color: $red;
5  box-shadow: inset 0 1px 1px 1px lighten($red, 40%); 
6  border-bottom: 3px solid darken($red, 10%);
7}

Map

Before go to topic @each, let’s go to a brief introduction to the maps in SASS, they are good in creation of initial rules in project, like config colours, fonts and breakpoints, we can get as example the definition of colours in project.

Rather than create a variable for each color, we can create a collection of colours, a map with key and value corresponding of each color that need be create assigned to a variable.

Copy 
1$color: (
2  red: #FF0000,
3  green: #00FF00,
4  blue: #0000FF
5);

Now, to search the colours just use the native function of SASS map-get() that receive two parameters, the first one is the map, that in this case is $color, and the second parameter is the key corresponding to the color that you desires.

Copy 
1.element {
2  color: map-get($color, red);
3}

result:

Copy 
1.element {
2  color: #FF0000;
3}

Each

The @each is an excellent in save time automating repeated tasks, is very util to create many classes with the same properties but with different values.

In creation of principal components of your application like buttons and your variables is a great case to use a @each, here we see too one of benefits of use maps, using the same map of last example, let’s create this variables of buttons.

Copy 
1$color: (
2  red: #FF0000,
3  green: #00FF00,
4  blue: #0000FF
5);
6
7@each $btnType, $btnColor in $color {
8  .btn--#{$btnType} {
9    background-color: $btnColor;
10    box-shadow: inset 0 -1px 1px 0px lighten($btnColor, 20%); 
11    border-bottom: 3px solid darken($btnColor, 10%);
12  }
13}

For the variables use in selectors and properties, is necessary interpolate then, to this is used the sintaxe #{$variable} how can you perceive in line 8 in example above.

The @each will go through the map $color, get the key and value, and create one button to the each item. This will result in three classes.

Copy 
1.btn--red {
2  background-color: #FF0000;
3  box-shadow: inset 0 -1px 1px 0px #ff6666;
4  border-bottom: 3px solid #cc0000;
5}
6
7.btn--green {
8  background-color: #00FF00;
9  box-shadow: inset 0 -1px 1px 0px #66ff66;
10  border-bottom: 3px solid #00cc00;
11}
12
13.btn--blue {
14  background-color: #0000FF;
15  box-shadow: inset 0 -1px 1px 0px #6666ff;
16  border-bottom: 3px solid #0000cc;
17}

If

The @if is very util in the to create functions, each’s and mixins that in some cases need display a different behaviour, rather than create an another mixin you can just insert a condition inside this block fot that behaviour be added our not.

Using the example of @each above, let’s say that just one of the buttons need receive a different behaviour, yet we can go with the some code, is just add a @if to identify this button.

Copy 
1$color: (
2  red: #FF0000,
3  green: #00FF00,
4  blue: #0000FF
5);
6
7@each $name, $btnColor in $color {
8  .btn--#{$name} {
9    background-color: $btnColor;
10    box-shadow: inset 0 -1px 1px 0px lighten($btnColor, 20%); 
11    border-bottom: 3px solid darken($btnColor, 10%);
12    
13    @if $name == red {
14      color: #FFFFFF;
15    }
16  }
17}

In line 11 is added this condition that compare the key of map, if $name that are the keys of the map $color is equal to red soo the line 14 is added. Result:

Copy 
1.btn--red {
2  background-color: #FF0000;
3  box-shadow: inset 0 -1px 1px 0px #ff6666;
4  border-bottom: 3px solid #cc0000;
5  color: #FFFFFF;
6}
7
8.btn--green {
9  background-color: #00FF00;
10  box-shadow: inset 0 -1px 1px 0px #66ff66;
11  border-bottom: 3px solid #00cc00;
12}
13
14.btn--blue {
15  background-color: #0000FF;
16  box-shadow: inset 0 -1px 1px 0px #6666ff;
17  border-bottom: 3px solid #0000cc;
18}

Function

The directive @function in SASS is very util for each time less we need repeat code, in CSS exist a lot of operations that we need and then can be transformed in functions, like transform fixed font units in relatives.

Copy 
1@function rem($px) {
2  @return ($px/16) + rem;
3}
4
5.btn {
6  font-size: rem(32);
7}

There are a lot to take advantage of this on other features that the SASS have, we can use this feature in things extremely simple but that can save a lot of time, and time is money is not true?!

Always depends of how and when you go to use each feature that the SASS can offer to you, hen the expectation of the project grow constantly is great have something like that, will facilitate a lot in time to implement changes or new variations in components that already exist.

In SASS site have a lot of other thing very interesting that worth it be considered, case you have interest you can access the Guide or the Documentation.