What Are The Benefits Of Sass in 2022?

Cascading style sheets (CSS) dictate how HTML elements are displayed on a webpage. However, pure CSS can be repetitive and lengthy, especially when building a large and complex website. This slows the development process as you will likely have difficulty debugging and managing numerous CSS files. This is where Syntactically Awesome Style Sheet (Sass) comes into play.

What is Sass

Before we can look into the benefits of Sass, we need to understand what SASS is in the first place. SASS is a powerful CSS preprocessor that enables you to write more concise and readable CSS. Think of it as a tool that extends the capabilities of your standard CSS by adding features of traditional programming languages.

Initially, Sass was written in Ruby and required one to install Ruby in the system where the preprocessor will be used. However, in March 2019, this requirement was done away with shortly after Dart Sass and LibSass were launched. Dart Sass is a Sass implementation in Dart, while the latter is a Sass implementation in C and C++. However, LibSass was recently deprecated, meaning it'll not receive any further feature updates and compatibility with future CSS features. It would be best if you used Dart Sass for all your projects.

How does Sass work?

Browsers don't understand SASS, so you need to use a transpiler, LiveSASS, for example, to convert SASS code to pure CSS for the browser. So, during development, SASS is saved as a .SASS file which is then compiled/translated to a standard CSS file for the browser.

That said, Sass uses two main syntaxes -- indented and sassy CSS(SCSS). As the name suggests, the indented syntax, or simply Sass, uses indentation and .sass file extension. Conversely, SCSS is similar to standard CSS since it uses brackets and semicolons to denote code blocks. Here is an example of the two syntaxes:

Indented syntax

 //.sass//
nav 
    display: flex
    align-items: center
    justify-content: space-between
    

SCSS syntax

//.SCSS file//
 
nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    
}

From the examples above, SCSS is stricter due to the use of brackets and semicolons. However, it boasts more readability and better code organization than indented syntax.

Sass features

Sass applies features of conventional programming languages to stylesheets. These features include:

Variables

Sass variables, similar to traditional variables, allow you to store properties/values that can be reused. These variables are declared using a dollar symbol ($), for example:

$color-primary: #ffff00; // Yellow
 
body {
  background-color: $color-primary;
}

$color-primary is our variable. Once the code is compiled, the output CSS will be as follows:

body {
  color: #ffff00;
}

Arithmetic operations

Sass supports standard mathematical operators, including subtraction, addition, equals, and Boolean. This allows you to customize variables easily.

$size: 25px;
 
h2{
   font-size: $size + 5;
}
 
h3{

Functions

Sass functions are defined using @function . They can accept arguments and return a value just like typical functions, thus allowing you to perform dynamic and complex styling, such as calculating dimensions and defining colour schemes. You can also use flow-control at-rules such as @if, @else, @each, and @for and encapsulate iterations and loops. Consider the following example:

@function lightness-shift($colour){
    @if ( lightness($colour) < 25% ) {
        @return lighten($colour, 10%);
    }@else{
        @return darken($colour, 10%);
    }
}
 
 p {
      color: lightness-shift(#ffd956);
  } 

Our function name is lightness-shift with variable $color as our argument. If the colour lightness is less than 25%, the colour displayed/returned will be 10% lighter and 10% darker if the colour lightness is greater than 25%.

Mixins

@Mixins directive lets you create multiple CSS declarations that can be reused throughout the project. This helps eliminate repetition, so you end up with a cleaner coder that's easy to read and debug. See the following example:

  @mixin border-radius($radius) {
    -WebKit-border-radius: $radius;
       -Moz-border-radius: $radius;
        -ms-border-radius: $radius;
            border-radius: $radius;
  }
  
  .box {
     @include border-radius(10px); 
}

All the code will now be applied to the class box after being compiled:

.box {
    -WebKit-border-radius: 10px;
    -Moz-border-radius: 10px;
    -ms-border-radius: 10px;
    border-radius: 10px;
  }

Inheritance

As the name suggests, inheritance allows multiple classes to share a common set of properties. Sass inheritance is implemented using the @extend directive.

div {
    background-color: #0000FF; // Blue
    border: none;
    color: white;
    padding: 15px 32px;
}
 
.container {
    @extend div;
}

Interpolation

Interpolation isn't unique to SASS; it's common in other languages such as PHP, Perl, and Ruby. It allows for the insertion of SASS script into a stylesheet using #{$variable_name} syntax.

@mixin interpolation($changeable, $val, $prop)
{
    background-#{$changeable}: $val;
    position: $val2;
    #{$prop1}: 0px; 
    #{$prop2}: 0px;
}
 
.blockarea{
    @include interpolation("image", URL("img.png"), absolute, top, right);
}

Compiled CSS will be:

.blockarea {
    background-image: URL("img.png");
    position: absolute;
    top: 0px;
    right: 0px;
}

Benefits of using SASS

Here are the compelling benefits of using Sass when building your site:

1. Improves code readability and organization

When styling a container element with pure CSS, you must select it repeatedly whenever you want to style its children and descendants. This results in repetitive coding, which is prone to errors and difficult to read.

For example, let's say you want to style your navigation bar. Your CSS code will look like this:

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
 
nav li {
  margin-top: 1rem;
}
 
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

Sass eliminates repetition thanks to its nesting capabilities. This feature allows you to write DRY CSS code, which is easy to read and maintain. As such, you can style the children and descendants inside the main container for better code organization and improved visual hierarchy. So, the above code will look like this when styled with the SASS preprocessor:

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
 
  li { margin-top: 1rem; }
 
  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

That said, you should avoid complex nesting as it creates large CSS files after compiling, making it hard to maintain your stylesheet.

2. Improves productivity

Sass allows you to create partials, which are uncompiled sass files containing styling properties for specific elements. These files are then imported or forwarded into the main SASS file, which is compiled into a single CSS file.

As such, you can store global styling properties in partials and reuse them to build/style your multiple-page web app. Think of it as creating a library that can be invoked elsewhere in the app to serve the same logic and functionality. This way, anytime you need to style the same element on a different page, you don't have to rewrite the CSS code.

Your partial name should have an underscore prefix, for example, _mypartial. This ensures that the file isn't compiled.

That said, partials save on time and effort that goes into building a large web application. They allow developers to reuse core styling properties, thus improving productivity and speed of development. Also, the re-usability of partials allows you to achieve a consistent feel and look across your applications. Here is an example of a partial:

//_mypartial. Sass Sass
 
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

We can import it into our main sass file as illustrated below:

//Main. Sass Sass
 
@forward ‘mypartial’
 
body {
    font-family:’Helvetica’, sans-serif;
    background-color: #efefef;

The transpiler will convert the above into CSS as shown below:

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
 
body {
    font-family:’Helvetica’, sans-serif;
    background-color: #efefef;
}

Sass mixins also help to avoid repetitive coding, thus saving you time and increasing productivity. Similar to partials, mixins allow developers to store pieces of CSS code that can be reused throughout the website. Consider the following example:

@mixin set-font {
    font-family: ‘Helvetica’, sans-serif;
    font-weight: 400;
    color: blue;
    font-size: 25px;
}
 
body {
   @include circle;
}

3. Easier to maintain

Pure CSS is hard to maintain and update properties. If you need to make any changes, you'll be forced to tweak each property and value individually. For instance, let's say you used pure CSS to style your web page. If you want to change the colour of the buttons throughout your site, you'll have to go through the entire stylesheet to change the button properties and their values. This process is time-consuming, especially for businesses working with a small team.

SASS, however, allows you to create variables that store styling properties. This way, you can easily change the properties of certain elements from one place. Look at the following variables, for example;

$navbar_color : #a2b9bc;
 
$body_color : #878f99;
 
$button_color: #b2ad7f;
 
$primary_font: Poppins’, ‘Sans Serif’;
 
$secondary_font: ‘Roboto,' 'Helvetica';
 
 
 
.navbar   {
    background-color: $navbar_color;
          font-family: $secondary_font;
           }
 
body  {
       background-color: $body_color;
       font-family: $primary_font;
          }
 
button {
       background-color: $button_color;
       font-family: $secondary_font;
          }
  

If there's any design update for your buttons, you can conveniently modify the associated variable without modifying each button style property.

4. Improves site performance

As your web app grows in complexity, so does your stylesheet. Typically, when dealing with a large stylesheet, you may split it into smaller CSS files and import them into one main CSS file. But CSS is a render-blocking resource, and as such, a browser will trigger several HTTP requests to retrieve each CSS file before rendering the website to users.

Similarly, with SASS, you can break down and import smaller SASS files into a single file. The difference with the CSS import rule is that all imported SASS files are merged/compiled into a single CSS file, meaning the browser will trigger only one HTTP request. As a result, your site is rendered faster, improving the user experience.

5. Large community support

Sass was launched in 2006. It has been growing in usage thanks to the continuous development by its core team and independent developers. In addition to its robust community of users, there are numerous free resources online to help you learn and get started with SASS. The preprocessor's official documentation is a good place to start -- it's well-detailed and full of examples to help you make the most out of SASS.

6. You can customize Boostrap 4

Sass preprocessor is used in popular frameworks such as Bootstrap and Foundation. As such, if you're already familiar with these frameworks, you can easily customize them by changing the Sass variables in the code.

For example, if you want to increase the default container width offered by Bootstrap, all you have to do is update the $container-max-width values within the _variable.scss partial. After compiling, the new values, your Bootstrap source files will include the new values. You can also customize other Bootstrap aspects, such as colours, fonts, and margins.

Is Sass still relevant?

With the continuous improvements of standard CSS, one can't help but wonder if SCSS is still useful in modern web application development. But despite the CSS upgrades, SASS/SCSS still offers essential features that make it a better choice.

That said, SASS helps you build for scalability. It modularizes your stylesheets making them more manageable and easier to update as your app grows in usage. Also, due to ease of editing, SASS allows you to scale and add more functionality to your web app.

Frequently asked questions

What's the difference between Sass and CSS?

Sass is considered a scripting language that extends CSS capabilities. It has all programming language features, including variables, functions, and conditional statements. In that regard, Sass tends to be less repetitive than CSS, which is why the former is used for building complex apps.

Is Sass the same SCSS?

Yes. Sass and SCSS refer to the same thing. However, the two denote different syntaxes used in the SASS preprocessor. The former uses indentation syntax, while the latter uses the regular CSS syntax, which includes brackets and semicolons for separating code blocks.

Key Takeaway

Despite being an old technology, Sass has managed to maintain its relevance in web app development. Even though it is more suited for large projects thanks to its nesting capabilities and the use of variables, small projects also benefit from its modular code organization and enhanced productivity.