A comprehensive Case study of the benefits of using SASS over CSS

Case Study , Posted by on 2019/10/01 0     Comments
benefits of using SASS over CSS.

CSS preprocessors are tools which analyse a particular section of code written in its own syntax and then provide the CSS for the browser. A number of developers and designers are nowadays thinking about whether they should change over to using a Pre-Processor like SASS rather than just plain CSS. However, once you get to know about the power and features that SASS provides, not only would you never even consider using CSS again, you’ll never be able to do without it again!

So let’s explore the differences between CSS and SASS, which should make clear to you what are the benefits of using SASS over CSS is the wise decision to take:

1. HTTP Requests are fewer

Earlier, web specialists used to recommend isolating your CSS files into partitioned documents on the basis of the content. For example, textual styles, colours, grids, and so forth. One of the issues with this methodology is that you would end up with countless HTTP requests on your site, which in turn slows your website down and increases the loading time. Now, SASS, on the other hand utilises a Ruby compiler, using which we can separate our stylesheets into numerous individual documents and afterwards have just one “style.scss” which “@import”s all the different templates when it is compiled.

A few suggestions for separating your stylesheets so as to keep them more organised are: grids, style (main stylesheet with @imports), responsive breakpoints stylesheets (i.e. mobile, 481up, 768up, 900up, 1030up, 1240up), and text styles.

2. More organised Responsive Design Project

One of the best aspects of SASS is that using @imports you can separate your stylesheets into meaningful separate sheets. This permits us to individualise all of our stylesheets especially for each and every device we target. You could simply begin with a mobile “base.scss” stylesheet, after which, you can @import each of the various stylesheets through @media-queries which target different devices and browser sizes on the basis of the width of the viewport.

Since the styles are separated into their stylesheet with a fitting name, like 768up.scss or iPad-vertical.scss, it becomes a lot easier to organise and monitor all the various styles for the each and every device size.

3. Color Schemes can be reused

Another benefits of using SASS over CSS is that it lets us define variables which are completely reusable throughout the project. This is a huge help when handling things like colours and fixed width sizes. Let’s consider the colour scheming of the traditional CSS as opposed to that of SASS.

In regular CSS, you can declare the background of the body to be in #CCC. Obviously, your footer text, link highlight backgrounds, as well as the image borders might all be in #CCC. So, in the CSS stylesheet, you need to declare the background as well as the colour as #CCC 30-40 times throughout the project. Now consider this. Your customer happens to come back and ask for the colour to be changed to something else, maybe like #ededed. You would have no option other than painstakingly locating all the references to #CCC and changing them one by one to #ededed!

Now, on the other hand, benefits of using SASS over CSS is that the SASS syntax, you can simply declare a variable, for example, $light-gray, and whenever you need to use the colour #CCC, you can just declare the background to be $light-gray. This makes changing the colour extremely easy to do, as you can just go to that variable reference and change the value of $light-gray to whatever you wish, #ededed, in this instance. Just once, as opposed to 30 times or 40 times, using CSS!

4. Similar CSS Statements aren’t repeated

Other benefits of using SASS over CSS which shows off some of its power is the @extend attribute. Using @extend, you can incorporate styles into different classes which belong to a base class. Let’s take the following example.

Assume you need to style 3 separate images in the footer having mostly the same styles with minor alterations. Instead of having to write .image1 { … styles } .image2 { … styles… } image3 { … styles… } like you do in CSS, using SASS, you can just write .image { … main styles… } and after that .image1 { @extend .image; specific styles … }. This can save an enormous amount of time, as well as keep your code more organized as well.

Granted, you can do something similar to this using CSS as well, by categorising the classes as .image1, .image2, .image3, however, this process is so tiresome, that most designers just type out the code once again, forgetting about it. The feature provided by SASS is a lot easier, and a lot more update-friendly.

5. HTML5 SASS-Based Framework is more responsive

When you are building or designing a website you should try to avoid starting each new project from scratch. A huge part of most projects remain same, no matter the kind of project you are working on. This is the reason why you should just begin with some kind of a clear format to start every project.

ThESE are the benefits of using SASS over CSS. the reason more and more designers are rapidly switching over to SASS, for the features it provides, the ease of use, as well as its sheer practicality in several aspects, as compared to the traditional CSS.