6 Reasons to Start using Sass-feature

6 Reasons to Start Using Sass

Syntactically Awesome Stylesheets, or Sass is a preprocessing extension that adds more power to CSS. It’s extremely useful because it allows you to use variables, nested rules, mixins, inline imports and much more! Sass also helps keep your small and large stylesheets organized and can also minify them automatically. Enough small talk, let’s list the 6 reasons to start using Sass in your next web design project.

1. Preprocessing

A visual explanation of CSS preprocessing with Sass
A visual explanation of CSS preprocessing with Sass

Having one CSS file is very difficult to maintain, especially if it’s large and complicated. Sass gives you more features that don’t exist in CSS, like the ability to store variables, to nest style rules, to create functions (mixins) and more. You can have multiple SASS files and then combine them into one normal, and minified, CSS file that you can then link to your website.

2. Partials & Imports

Partials are a fantastic way to organize your CSS. A partial Sass file that contains one part or section of your full CSS styles. This is known as modularizing CSS, so that everything is easily organized and maintained. To create a Sass partial file, you need to give it a filename that starts with an underscore. The underscore will let Sass know that this file is a partial and should not be generated into its own CSS file. Let me give you an example.

Let’s first create a folder and give a filename of sass. Now, say you want to organize your styles so that each Sass partial contains one main part of your full style.

  • _reset.scss – Contains all the reset styles.
  • _header.scss – Contains all the header styles.
  • _content.scss – Contains all the content styles.
  • _sidebar.scss – Contains all the sidebar styles.
  • _footer.scss – Contains all the footer styles.

After we have created these files, we can create one main Sass file, let’s call it global.scss. Now this file will generate a .css file because it doesn’t have an underscore in the beginning of its filename. This file’s main and probably only role is to @import all the partials. Unlike CSS, Sass @import rule doesn’t call another HTTP request, which is perfect for performance. So, our global file should look something like this.

@import 'reset';
@import 'header';
@import 'content';
@import 'sidebar';
@import 'footer';

And now anytime we add a new partial file, we just need to import it in that global Sass file. Note that the order of these files does matter, because of the cascading nature of CSS. This means that if we import reset at the end, all of those styles will take effect and override anything before them!

3. Variables

Variables are extremely important because they allow you to store information that you can reuse throughout your styles. A variable can be a color, for example #CF649A. Let’s say that you want this same color to be applied in different areas of your stylesheet. In CSS, you would do something like this.

.main-header {
    background: #CF649A;
}
.main-content a:link {
    color: #CF649A;
}
.main-sidebar h3 {
    border-bottom: 10px solid #CF649A;
}
.main-footer {
    background: #CF649A;
}

Of course, this looks simple now, but you can imagine what it would be like in large projects. Sass uses the dollar-sign symbol $ to create a variable. So let’s see what we could do with those same rules above, but this time in Sass.

$color-primary: #CF649A;

.main-header {
    background: $color-primary;
}
.main-content a:link {
    color: $color-primary;
}
.main-sidebar h3 {
    border-bottom: 10px solid $color-primary;
}
.main-footer {
    background: $color-primary;
}

Using this method, it can be super easy to change a color that you’ve already used throughout your stylesheet. And this also works with partials! As long as you define the variables before you import the partials that use these variables.

4. Nesting

In HTML elements, some elements have children and therefore are called parents. So a div elements can have multiple paragraph elements. Unfortunately in CSS, you can’t style your elements in that way, because you cannot nest a rule inside another. But with Sass, you can do just that. Note that you shouldn’t overuse this feature, as it will become ridiculous at some point. A good practice would be going a maximum depth of 3 nested rules. Here’s an example.

.main-nav {
    ul {
        list-style: none;
        li {
            display: inline-block;
        }
    }
    a {
        display: block;
        padding: 20px 30px;
        background: aqua;
    }
}

Things make much more sense now, right? Sass gives you that same visual hierarchy that HTML does in a way.

5. Mixins

Think of mixins as groups of CSS rules that are repeated and reused throughout your stylesheet. An example would be something like adding rounded corners to elements using the border-radius property. Now this is extremely frustrating especially because this property needs multiple vendor prefixes in order to work in multiple browsers. In CSS, you would do something like this.

.button {
    -webkit-border-radius: 5px;
       -moz-border-radius: 5px;
        -ms-border-radius: 5px;
            border-radius: 5px;
}

.box {
    -webkit-border-radius: 15px;
       -moz-border-radius: 15px;
        -ms-border-radius: 15px;
            border-radius: 15px;
}

You keep repeating yourself over and over again, and it becomes an even bigger hassle when adding vendor prefixes to the mix. To make this easier, Sass uses mixins to implement what is known as the DRY principle, which stands for “Don’t Repeat Yourself”.

You can create a mixin using the @mixin directive and then give it a name, let us call it rounded-corners. We could also go a step further and pass a variable inside of it, in our case a radius. This way we could use it anywhere we want, hassle free.

@mixin rounded-corners($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

Now that we defined our mixin, let’s call it in our button and box rules using the @include directive.

.button {
    @include rounded-corners(5px);
}
.box {
    @include rounded-corners(15px);
}

And voila, we have a group of CSS rules that we can easily access and use anywhere in our stylesheet.

6. Operators

Yes, that’s right, Sass can do math! It has these standard math operators (+, -, *, /, and %). This is very useful when writing CSS, especially when you’re dealing with variables. For example, we have a $container-width variable, and we want to apply it to a .container class that will change with different screen size. We could do something like this.

$container-width: 90%;

.container {
    width: $container-width; // 90%
    @media screen and (min-width: 320px) {
        width: $container-width / 1.2; // 75%
    }
}

And there you have it, 6 reasons to start using Sass in your current and future web projects. I just want to point out that Sass is only one of the most popular CSS preprocessors out there. Another popular alternative is LESS. So, if you use another type of preprocessor, that’s cool, at least you’re making things easier for yourself.

Have you started using CSS preprocessors yet? Let us know.

Post a Comment

To post code, use the code tag with a class language-*
Examples: code class="language-markup"code class="language-css"