HTML & CSS

Image for Using SCSS/Sass to be more efficient

Learn how to use SCSS with a few basic examples using nesting, mixins and extends. Become a more efficient developer today.

Every frontend developer should be familiar with SCSS, it's an easy way to speed up your development and keeping your CSS maintainable.

A Sass, SCSS comparison

They are basically the same thing, but still quite different on a few aspects, especially the syntax.

A Sass example

body
    background: red
a
    color: orange

A SCSS example

body {
    background: red;
}

a {
   color: orange;
}

I will basically always use SCSS, the reason being that I find SCSS to be more:

How can I use SCSS?

As explained earlier, SCSS is a preprocessor script language, it does not work right out of the box when you link it in your HTML as CSS does.

SCSS first has to be compiled to CSS before linking to it in your HTML.

Use sass to compile SCSS to CSS

The above title says it all, you need to use a sass-compiler to compile SCSS to CSS.

Now a sass-compiler can take a few identities:

I strongly suggest using a build tool, which could really speed up your development process.

Webpack is king here!

SCSS nesting

Nesting is a core concept of using SCSS, if you aren't nesting you're still writing plain CSS.

What is nesting?

ul {
    li {
        background: #EEE;
    }
}

On tip on nesting, avoid deep nests as it might impact CSS performance. This is true because

.products {
    .product {
        .product-options {
            li {
                a {
                  color: red;
                }
            }
        }
    }
}

results in .products .product .product-options li a which actually could've been .product-options li a.

Not only will this improve performance, but it will make the code more readable and re-usable. Let's say you'd want to use the same list on the product detail page?

Oh wait, you can't since it's nested in the .product selector.

@include, @mixin, @import, and @extend

Including and extending is what makes SCSS king, it transforms CSS into a dynamic scripting language.

Mixin example

@mixin make-button($background) {
    background: $background;
    color: red;
    padding: 0.4rem 1rem;
}

That's a mixin! Now how do I use such a feature?

Include example

.btn {
    @include make-button(white);
}

This will call the make-button mixin add copy all it's CSS-attributes to .btn.

Did you notice a parameter has been passed to the mixin? Yep, the button will have a white background and red text.

Stuck somewhere? Comment below and I'll help you out!

These are the most basic SCSS principles and should get you started just fine.

Enjoy a more solid programming experience!

Interested in more articles about HTML & CSS?

  • Smooth scrolling with Vanilla JS

    Dec 06 2018

    Javascript has a built-in scrolling method on the window element, changing a few options allows you to enable smooth scrolling.

  • How to create a website

    Dec 06 2018

    Creating a website is not a one-step process, you need an idea, a design, the program, deployment and last but not least you'll need to optimise it for SEO.