Introduction to Sassy CSS – CSS with super powers

Sass is a stylesheet language that gives your CSS lots of power and flexibility. CSS can be fun, but it becomes difficult to maintain when they grow large, for this reason, CSS preprocessors like Sass come into the playground to give your CSS superpowers.

We will be discussing several superpowers it can provide, and why you should use it in your current/next project

1. Sass Variables

It allows you to declare variables, in other words, you don’t have to repeat certain variables in your project. A variable allows you to store a value so that it can be used in other parts of the project.

For example, you want to build an Agricultural website with a theme of color, using traditional CSS, you will need to repeat same color string for buttons, texts, backgrounds, etc, but with the power of Sass, you declare it in one place and use it in multiple places in your code.

$primaryColor: #3cb878;
$lg-font: 16px;
$md-font: 14px;

p{
  color: $primaryColor;
  font-size: $lg-font;
}

button {
  background-color: $primaryColor;
  font-size: $md-font;
}

As you can see, if you change the primary color variable, every element associated with the variable will be affected.

 

2. Sass Nesting

Here comes another superpower of Sass which is nesting. Nesting allows you to target HTML elements in a cleaner way and with lesser code.

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

nav{
  ul{
    display: flex;
    li{
      list-style: none;
      padding: 20px;
    }
    a{
      color: green;
      text-decoration: none;
    }
  }
}

If we were to rewrite the above code using traditional CSS, it will translate to this

nav ul {
  display: flex;
}
nav ul li {
  list-style: none;
  padding: 20px;
}
nav ul a {
  color: green;
  text-decoration: none;
}

We will be writing “nav” for each tag, which is redundant.

 

3. Mixins

We discussed the power of variables, mixins comes with an additional blast. Mixins allow you to group styles that can be reused throughout the code. Another power of mixins is that they take arguments that allow the group of styles to be customized each time a Mixin is called.

<div class="background">
  <p class="text">Hello world</p>
  <p class="small-text">it is a beautiful world</p>
</div>

@mixin font ($size, $weight, $family){
  font-size: $size;
  font-family: $family;
  font-weight: $weight
}

@mixin box {
  padding: 20px;
  border-radius: 2px;
  background-color: purple;
  color: white;
}

.text{
  @include font(20px, 500, Roboto)
}

.small-text{
  @include font(12px, 400, Roboto)
}

.background{
  @include box;
}

Using Mixins is a very good way of preventing code redundancy and writing cleaner codes

 

4. Imports

Maintaining huge CSS files with many lines of codes can become tedious and very frustrating, and also splitting your CSS files into different smaller parts isn’t advisable because you will be serving HTTP requests for each file.

Here comes another superpower, the import superpower. It allows you to create smaller Sass files that can be imported in other Sass files, meaning that you can have multiple Sass files all imported into a single file and that will be served on a single HTTP request.

Here is how to import a Sass file

// Your main Sass file
@import 'button';
@import 'text';
@import "my-custom-theme"; 

.class-name {
  // Your code
}

Simple and easy.

 

Finally, We have come to the end of this article discussing the superpowers of Sass and how to make your CSS sassy.

There are also other extensive Sass superpowers if you need extensive or in-depth knowledge on how to use Sass visit their documentation website

 

Do you like this article ? Like Comment and Share.

 

Cheers!!!