Benefits of Using SASS Over Conventional CSS

Reuse as much as you want

Did you know that one of the most useful benefits of using a Syntactically Awesome Stylesheet (SASS) in your project is the ability to use variables?

A variable is used to assign a value or a set of values that can be reused throughout your SASS files as many times as you want. Easy and useful, isn’t it?

Now let us take an example wherein you're using a fixed set of colour palettes for your website. These fixed colour palettes are used everywhere; buttons, navbar, icons, footer and so on. By using Cascading Style Sheets (CSS), you had to repeat the same colour code again and again, but by using SASS variables, you can store these values as follows:

$black: #333;

$first-font: 'Ubuntu', 'Arial', 'Helvetica', sans-serif;

$second-font: 'Nunito', 'Arial', 'Helvetica', sans-serif;

Once you assign values to the SASS variables, you can use them wherever you want in your SASS files as below:

h2 {

  font: $first-font;

  colour: $black;

}

p {

  font: $second-font;

  background-colour: $black;

  padding: 6px;

}

Nesting

SASS allows you to use nesting, which is a code inside another code. By making use of nesting, you can easily target HTML elements.

The advantages of nesting are:

• Easier to read

• No need to repeat selectors

• Better code structure

Example:

.navbar {

  font: $first-font;

  colour: $black;

  li {

   margin-top: 1rem;

   a {

    padding: 10px;

    font-size: 2rem;

    span {

     font-weight: 700;

    }

   }

  }

Mixins

Imagine you have used the same set of CSS properties in your code and these properties are repeated in your style sheet multiple times for different CSS selectors. This is where mixins come into play. 

For eg: 

@mixin set-font( $family: 'Ubuntu' , $weight: 400 , $style: normal ) {

  font-family: $family , 'Arial', 'Helvetica', sans-serif;

  font-style: $style;

  font-weight: $weight;

}

How to use mixin in your project?

h1 {

  @include set-font;

  color: $black;

}

This will be compiled into:

h1 {

  font-family: 'Ubuntu', 'Arial', 'Helvetica', sans-serif;

  font-style: normal;

  font-weight: 400;

  color: #333;

}

Import

When you are working on big projects, things become more complex so this will affect your CSS as well. SASS has the @import rule which makes things easier for you. @import enables you to make your code easy to maintain by importing smaller SASS files into your main SASS file. 

For eg:      

@import "slick-sliders"; 

@import "cards-container";  

@import "nav-bar-items";     

Customisation in Bootstrap 5

If you are well-versed with Bootstrap and you know SASS, then you can easily change SASS variables in its code. You only have to change the value of the variables according to your requirement.

Let us take a scenario where you are not happy with the default container width and you want to add more width. All you have to do is change within the _variables.scss file. This is how you will be able to update or change SASS variables.

$container-max-widths: (

  sm: 550px,

  md: 730px,

  lg: 970px,

  xl: 1150px,

  xxl: 1330px

);

Large community support

Another benefit of using SASS is the large amount of documentation support available over the internet. You can find several resources on the SASS community page, including blog posts, guides, tutorials, projects and more. This will surely make you feel like you are not the only one learning SASS.

Conclusion

SASS boosts your performance and avoids repetition of the same CSS property and their assigned values by using mixins and variables. It enables you to change variables in your Bootstrap based on your need.

It will take some time to become an expert in SASS but the efforts and time will be beneficial in your next website development.

Want to know more about how SASS can help you? Get in touch with our experts.