SASS (Syntactically Awesome StyleSheets)- Basics (Part 2)

In the previous article, we covered some basics of SASS and defined the learning outcomes from the articles. We will cover the rest in this article.

What we will learn:-

for loop
each
while
Splitting styles into different files
Extend properties of other class

We will finish off with all the basics in this article.

For Loop

We can use for loop in Sass which is not possible in CSS, Let's say you have a particular naming convention of a class and it can be easily written using for loop, Sass gives us the power to write for loops. Let's see how we can do it:

<style type='text/scss'>
    @for $i from 1 to 6 {
        .text-#{$i} {font-size: 15 * $i};
    }

</style>

<p class="text-1">Hello</p>
<p class="text-2">Hello</p>
<p class="text-3">Hello</p>
<p class="text-4">Hello</p>
<p class="text-5">Hello</p>

As you can see the last number in for loop is not taken into consideration. So be careful of using the loop extremes and parameters.

While Loop

As in the previous example, we had the loop running from 1 to 6 and we had a common class naming convention which helped us apply the looping logic. Similarly we can do it here as well i.e. we can set the condition for the while loop. Let's see how we do it:

<style type='text/scss'>
  $i : 1
  @while $i < 6 {
      .text-#{$i} {font-size: 15 * $i};
      $i : $i + 1;
  }
</style>

<p class="text-1">Hello</p>
<p class="text-2">Hello</p>
<p class="text-3">Hello</p>
<p class="text-4">Hello</p>
<p class="text-5">Hello</p>

Each loop:

Each loop works according to the values in the list that we want to iterate through. Let's say an example:

<style type="text/scss">
   @each $color in blue, black, red {
      .#{$color}-bg {color: $color;}
    }
</style>

<div class="blue-bg"></div>
<div class="black-bg"></div>
<div class="red-bg"></div>

Here you can see we have three div which can individually be colored accordingly using for loop.

Splitting Styles in different files

This is fairly easy to do as this provides a structured format of the code and how we can split the codes accordingly.

Let's say you have component.scss file and you want to import it, you can simply use the @import directive.

@import component

That's it and you are done importing the file.

Extending properties of other class

Let's say you want to have some properties to that of some other class, in CSS we had write that whole again but in Sass we can use the @extend directive and directly use all the properties in other class or what we can say is inherit the properties of the class. Let's see how we can do this.

.p{
  background-color: red;
  height: 70px;
  border: 2px solid green;
}

.bp{
  @extend .p;
  width: 150px;
  font-size: 2em;
}

As you can see that we have inherited the properties of the upper class to the next class that we have written.

This is all about the basics of Sass, I will be going through much deeper concepts of Sass later. Do stay tuned 😊

dubesar