SCSS, the pre-processor which may not be forgotten

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

    background: red
    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:

  • Readable
  • Encourages proper nesting
  • DRY code using @extend
  • Widely integrated by big projects such as Foundation, Bootstrap, Bulma, …

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!

Leave a Reply

Notify of