Learning to Use Mixins in SCSS: Pitfalls and Lessons

In the last few months, I've given myself the opportunity to start programming.

Why suffer? Some might say.

Hahaha, simply because after working in the software industry for a while, some things stick. One of them is the interest in understanding the environment a little better and finally understanding what your coworkers are talking about. XD

But mainly, I took it as a personal challenge. One of those things you always told yourself weren't for you, but deep down, you know you can do and that will teach you many lessons.

I started by learning GitHub, HTML, and CSS. Recently, I've been delving deeper into the use of SCSS and, in particular, mixins. Mistakes? Many. Learnings? Also. Here are the main ones from this week:

1. Syntax is key

One of the most common mistakes I made was not writing the syntax for mixins correctly. A small mistake, like forgetting the curly braces , not including @content, or worst of all… forgetting the [;], can cause the mixin to simply not work.

❌ Error:

For example, this code won't work because it's missing [;] 🙄 after @content:

@mixin xs {
    @media screen and (max-width: #{$screen-xs-max}) {
        @content
    }
}

✅ Solution:

@mixin xs {
    @media screen and (max-width: #{$screen-xs-max}) {
        @content;
    }
}

Just plain mad lol

2. Code order and position matter

Another mistake I made was defining mixins after trying to use them. If you define a mixin after including it in another block, SCSS won't recognize it and the styles won't be applied.

❌ Error:

@include sm {
    .hero-text {
        padding-right: 0px;
    }
}

@mixin sm {
    @media screen and (min-width: #{$screen-sm-min}) and (max-width: #{$screen-             sm-max}) {
        @content;
    }
}

✅ Solution: Declare the mixin before using it

@mixin sm {
    @media screen and (min-width: #{$screen-sm-min}) and (max-width: #{$screen-sm-max}) {
        @content;
    }
}

@include sm {
    .hero-text {
        padding-right: 0px;
    }
}

This is one of those things that seems logical when you read it (me feeling bad for my old self), but wasn't so logical when I was first writing mixins 🙈.

3. Designing mobile-first works best for me

At first, I tried to make my design work on large screens first and then scale it to mobile, but I found this caused me more problems than necessary. Now, I apply a "Mobile First" strategy, which means I design for small screens first and then scale the design for larger screens.

✅ Benefits:

I make sure the design is accessible on mobile devices without having to rewrite a lot of rules.
It's easier to scale from small to large than the other way around.
Reduce the amount of unnecessary code in media queries.

Here's an example of a "mobile-first" design:

.hero {
    width: 100%;
    padding: 20px;
    text-align: center;
}

@include sm {
    .hero {
        padding: 50px;
        text-align: left;
    }
}

@include md {
    .hero {
        padding: 80px;
        display: flex;
        justify-content: space-between;
    }
}

In this case, we start with a basic mobile-centric design and progressively add changes based on the screen size.

Now let's compare this with an opposite approach, where you start designing for desktop and then try to adapt to mobile:

.hero {
    display: flex;
    justify-content: space-between;
    padding: 80px;
    text-align: left;
}

@include sm {
    .hero {
        padding: 50px;
    }
}

@include xs {
    .hero {
        display: block;
        padding: 20px;
        text-align: center;
    }
}

In this case, we have to override several properties like display and justify-content on mobile, which makes the code more cumbersome and error-prone.

By designing "mobile-first," the code is cleaner and easier to maintain. IN MY OPINION.

Hahaha, I know the topic is controversial. And it's possible I'll change my mind in the future. But what does that matter now?

What matters is... what's your opinion? Include examples where the code was easier for you, whether you started with mobile, desktop... or tablet? (You never know.)

Anyway, if you're just learning SCSS, I hope these tips are helpful and help you avoid the same mistakes I made. Bye!