Home / CSS3 / 5 Reasons to stop using CSS and use SASS

5 Reasons to stop using CSS and use SASS

Tuesday August 3, 2021
7 minutes read
128 Views
sass

Writing CSS (Cascading Style Sheets) is crucial to successfully explain how HTML parts must be displayed on a web page to specify styles, design, layout, and everything you need to make a gorgeous website. However, as you work on larger, more complex sites, you may begin to wonder if CSS is a better option. Congratulations if you’re thinking these things. It’s time to use the CSS Preprocessor.

What is a CSS Preprocessor?

An application or utility with its own syntax is eventually compiled into standard CSS code.

Sass, Less, and Stylus are examples of preprocessors. In this essay, I’ll go through five reasons why you should abandon CSS in favor of Sass.

What is sass?

One of the most popular CSS Preprocessors is Sass. It includes a number of features that can assist developers in writing better and cleaner CSS code. More information is available on the Sass official website and in the Github repository.

This is a question that is frequently posed. Sass vs. SCSS (Sass vs. SCSS)

They’re both Sass, but with distinct syntax. SCSS is a newer version of Sass, Sass Version 3.

Example of scss syntax:

/* .scss file */
$bgcolor: blue;
$textcolor: red;
$fontsize: 25px;
  
/* Use the variables */
body {
  background-color: $bgcolor;
  color: $textcolor;
  font-size: $fontsize;
}

Output CSS: 

body {
  background-color: blue;
  color: red;
  font-size: 25px;
}

Example of Sass syntax:

/* SASS */
  
$primary-color: green
$primary-bg: red
  
body 
  color: $primary-color
  background: $primary-bg

Output CSS:

/* CSS */
body {
  color: green;
  background: red;
}

SCSS, as you can see, has a CSS-like syntax that is easier to understand and write. It is a CSS extension, whereas Sass has a more complicated syntax. Their file extensions are likewise different: .sass and .scss, respectively. As a result, I’ll be utilizing scss in my examples.

Here are five strong arguments for using Sass instead of CSS.

1-It has options for everything you want to do.


Variables are currently supported by CSS, although they aren’t supported by Internet Explorer and older versions of other browsers.

In a project, several CSS classes might have the same rule. For example, on a webpage, we have 30 boxes of varying sizes.

.box-one {
   width: 50px;
   height: 50px;
   background:  red; 
}
.box-two {
   width: 50px;
   height: 50px;
   background: yellow; 
}

...

.box-thirty {
   width: 50px;
   height: 50px;
   background: blue; 
}

If your client’s requirements alter later and he requires a box width and height of 100px, you’ll need to make modifications. Then I have to raise the width and height parameters of each class one by one. This may be aggravating and time-consuming in real-world development.

So the question now is: how can we do it more efficiently?

Sass has a solution for you: variables. We can use variables to store values and utilize them later, just like in other programming languages.

Decalartion of Varibale

$variable-name: value; 

Returning to the previous example, defining variables for width and height would make changing the value at different times a breeze.

$box-width: 10px;
$box-height: 10px;

You can see that if we want to modify the width and height numbers later, we can do it simply.

$box-width: 100px;     // changed from 10px to 100px
$box-height: 100px;    // that's all!
.box-one {
   width: $box-width;  // using variables now instead of pixels
   height: $box-height;
   background: red; 
}
.box-two {
   width: $box-width;
   height: $box-height;
   background: yellow; 
}
...
.box-thirty {
   width: $box-width;
   height: $box-height;
   background: blue; 
}

2- It makes advantage of nested syntax😲

Nesting is not supported by standard CSS. A class cannot be written inside another class. SASS, on the other hand, allows you to utilize nested syntax, which is code that is embedded within another piece of code that performs a larger purpose. Nesting provides for a more efficient manner of targeting components in SASS. In other words, you may use CSS selectors to stack your HTML components.

Nesting’s advantages include:

  • In most situations, the syntax is more natural and simple to read.
  • Prevents the need for numerous rewrites of selectors.
  • Because of its visual hierarchy, the code is more organized and structured, which leads us to…
  • Code that is easier to maintain.

Nested SASS (SCSS syntax) code example:

.navbar {
  color: $primary-color;
  li {
    margin-left: 16px;
    a {
      padding: 5px;
      font-size: 20px;
      span {
        font-weight: 700;
      }
    }
  }
}

Important: Nesting classes more than three layers deep are not advised.🥱

3- Mixins are included😱 

We learned how to utilize variables in CSS rules before. But what if we need to combine a number of rules? Mixins, a feature of Sass, allows us to accomplish this.

What exactly is a Mixin?

Sass methods called mixins combine CSS declarations together. We can utilize them as variables later.

The @ mixin command, followed by a name, can be used to create a mixin:

@mixin my-font {
  font-family: Popins, sans-serif;
  font-size:   16px;
  line-height: 1.5;
  font-weight: bold;
}

After building the mixin, we can use the @ include command to include it in any class. As a result, instead of 4 lines of font rules every time, we may use the my-font mixin. This method makes the code easier to understand.

The @include directive was developed to allow you to utilize the mixin (include).

h5 { 
  @include my-font; 
}
p { 
  @include my-font; 
}

4- It provides Imports feature

Your stylesheets will expand and get more complicated as your project grows and becomes more complex. So here’s where Sass’s helpful feature Imports kicks in.

Finally, the Sass import function allows us to break down our large CSS files into smaller chunks. Smaller files are considerably easier to read and manage than one large file with infinite lines.

In fact, CSS now includes an import function. However, it functions in a different way. Each time CSS imports a file, it sends an HTTP request to the server. Sass performs it without making an HTTP request, which is a more efficient method.

All you have to do is use the @ import command to import your Sass file into another Sass file:

@import "source/font-awesome";           
@import "source/slick";                         
@import "framework/bootstrap";  
@import "my-custom-theme";  

As you can see, you don’t have to specify the file extension name, and the import path may also contain folders, allowing you to arrange your SASS working directory as you like.

5- Bootstrap 4 may be customized.

If you’re acquainted with Bootstrap, SASS will allow you to customize the web framework by simply changing the SASS code. All you have to do now is alter the values of a few variables. For example, you could not like the default breakpoints provided by Bootstrap and want to add another. To add the additional breakpoints you wish to support, just edit the $grid-breakpoints mapping variable found within the _variables. scss file.

Conclusion

These are some of the most significant reasons and features of Sass, which aid in the creation of more efficient CSS code. Install Sass on your PC for a better understanding. You may also go right into coding at codepen.io. I hope you found this post to be informative.

Visit TheBetaCoders for more help in CSS and other programming languages.


Post author

A bright, talented, ambitious and self-motivated 💻 Freelancer, ⌨ Programmer, JavaScript and Typescript lover 📍

  Tweet It


Leave a Reply

Your email address will not be published. Required fields are marked *