TechNik

What is SASS/SCSS?

What is SASS/SCSS?

Nikita Agrawal's photo
Nikita Agrawal
·

6 min read

Pre-requisites:

  • Good understanding of CSS

SASS stands for Syntactically Awesome Style Sheets and SCSS stands for Sassy CSS. If you look up the official site of SASS/SCSS, it gave the simplest definition of SASS/SCSS, "CSS with superpowers".

Let me explain why it is called "CSS with superpowers". While working on large projects, if we use vanilla CSS it gets pretty lengthy and hard to maintain. But Sass/Scss provides features like inheritance, modularity, looping, conditionals, nesting, mixins to make CSS maintainable.

If both provide the same features and both are compiled into CSS then what's the difference between SASS and SCSS?

The difference lies in their syntax. SCSS is somewhat like CSS while SASS doesn't use braces and semi-colons.

Now, you get a slight idea of what is SASS and SCSS and what features they provide. So, let's dive more into them and understand how to implement them through examples.

Variables

We can use variables when we have to set the same property for various elements. They can be declared using $.

Suppose, we have to use the same color for the whole site. Then, we can do something like.

$primary-color: blue;

//and then we use this in the selector

SCSS Syntax

h1{
  color: $primary-color;
}

SASS Syntax 

h1
  color: $primary-color

Nesting in CSS

As we have already discussed, as the project goes larger maintaining CSS is difficult. But we can organize it by placing child style rules inside the parent element.

HTML

<nav>
  <ul>
    <li>Study</li>
    <li>Make project</li>
    <li>Write blog</li>
    <li>Go for walk</li>
 <ul>
</nav>

CSS 

SCSS Syntax

nav {
  background-color: black;
  ul {
   list-style: none;
   li {
    display: inline-block;
    color: white;
    margin-right: 10px;
  }
 }
}

SASS Syntax

nav 
  background-color: black
  ul 
   list-style: none
   li 
    display: inline-block
    color: white
    margin-right: 10px

Mixins

New features take time before being fully adopted by browsers and ready to use. So, we need to add vendor prefixes to the CSS rules as features were added. So, your rule for border-radius looked like this:

div{
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    border-radius: 15px;
}

Now, consider the case if you have to put the same box-shadow in multiple places on the same web page. Of course, you can copy and paste it multiple times. But then we lost one principle of development i.e. DRY(Don't Repeat Yourself).

This is where mixins come into the picture. Now, what are mixins?

Mixins are just like functions in CSS. More specifically, a mixin is a group of related CSS rules that can be reused throughout the stylesheet.

How to use it?

Definition of CSS rule starts with @mixin, then the name of the mixin, and then parameters in the parentheses which are optional.

So, we write the above example like this 

@mixin border-radius($radius){
    -webkit-border-radius: $radius;
    -moz-border-radius: $radius;
    -ms-border-radius: $radius;
    border-radius: $radius;
}

Now, for using it we just need one line. 

div{
    @include border-radius(15px);
}

Above one was SCSS syntax. We can write the same for SASS.

@mixin border-radius($radius)
    -webkit-border-radius: $radius
    -moz-border-radius: $radius
    -ms-border-radius: $radius
    border-radius: $radius

div
  @include border-radius(15px)

Looking like magic, isn't it? 😍

Add logic to the CSS styles

We can add some logic to our CSS styling using @if and @else just like we do in JavaScript. 

HTML

<div id="box"></div>

CSS

SCSS Syntax

@mixin border-stroke($val){
   @if $val == light {
      border: 1px solid black;
   }
   @else if $val == medium {
      border: 3px solid black;
   }
   @else if $val == heavy {
      border: 6px solid black;
   }
   @else {
      border: none;
   }
}

#box{
    width: 150px;
    height: 150px;
    background-color: red;
    @include border-stroke(medium);
}

SASS Syntax

@mixin border-stroke($val)
   @if $val == light 
      border: 1px solid black

   @else if $val == medium 
      border: 3px solid black

   @else if $val == heavy 
      border: 6px solid black

   @else 
      border: none

#box
    width: 150px
    height: 150px
    background-color: red
    @include border-stroke(medium)

Looping in CSS styles

We can loop through CSS styles using @for. It is very much similar to what we used in JavaScript with some differences in syntax.
It is used in two different ways:

  • start through end: It includes the end number as part of the count.
  • start to end: It excludes the end number as part of the count.
start through end 

@for $i from 1 through 12 {
       .text-#{$i} {
              font-size: 15px * $i;
       }
}

So, what's happening in the above code?

#{$i} is used to combine the variable i to the text text.

In CSS, it would look something like this 

.text-1{
    font-size: 15px;
}

.text-2{
   font-size: 30px;
}
.
.
.
.
.text-12{
   font-size: 180px;
}

The syntax for SASS is pretty much the same as we can see that through previous examples.

Mapping over items

We can use @each to map over a list or map. On each iteration, the variable gets assigned the current value from the list or map.

HTML

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

SCSS 

@each $color in blue, black, red{
    .#{$color}-bg{
        background-color: $color;
    }
}

div{
  width: 200px;
   height: 200px;
}

It works slightly differently in the case of the map.

$colors = (color1: blue, color2: black, color3: red);

@each $key, $color in $colors{
    .#{$color}-bg{
        background-color: $color;
    }
}

$key is important to reference the keys in the map.

Applying a style using @while

@while works just like it works in JavaScript. It creates CSS rules until a condition is met.

HTML

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

SCSS

$i: 1;

@while $i < 6 {
    .text-#{$i} {
        font-size: 15px * $i;
    }
    $i: $i + 1;
}

What the above code is doing?

First, it is initializing i, then we are looping until i is less than 6.

Then, we are increasing font size by 15px*i times and finally updating the value of i.

Partials

Partials are separate files that hold chunks of CSS code. It can be imported and used in other Sass files.

Names for partials start with an underscore ( _ ), which tells Sass that it is a small segment of CSS and not to convert it into a CSS file.

To import the code from one partial to another or into the main file. You just need to write something like at the top.

@import "partial_name"

If there is some partial named "mixins" and you want to import it into the main file.

@import "mixins"

underscore and file extension are not needed in the import statement.

Inheritance

Inheritance works in CSS as it works in JavaScript. In JavaScript, a child class can take functionalities from the parent. Same in CSS, with the help of it, you can borrow CSS rules from one element using the keyword @extend. 

HTML

<h3>Posts</h3>
<div class="info-important">
  <p>This is an important post. It should extend the class ".info" and have its own CSS styles.</p>
</div>

<div class="info">
  <p>This is a simple post. It has basic styling and can be extended for other uses.</p>
</div>

SCSS 

h3{
    text-align: center;
  }
  .info{
    width: 200px;
    border: 1px solid black;
    margin: 0 auto;
  }

  .info-important{
    @extend .info;
    background-color: magenta;
  }

This is all you need to know about SASS/SCSS.

thankyou.gif

CSScss preprocessorsSassscsslearning