Aprendiendo a usar Mixins en SCSS: Errores y Lecciones

En los últimos meses me di la oportunidad de empezar a programar.

Por qué sufrir? Dirían algunos

Jajaja simplemente porque después de trabajar un tiempo en la industria del software, algunas cosas se pegan. Una de ellas es el interés por entender un poco mejor la salsa del entorno y por fin entender de qué hablan tus compañeros de trabajo XD

Pero principalmente lo tomé como un reto personal. De esas cosas que siempre te dijiste que no eran para ti, pero que en el fondo sabes que puedes hacer y que te traerán muchas lecciones.

Empecé aprendiendo de GitHub, HTML y CSS. Recientemente, he estado profundizando en el uso de SCSS y, en particular, en los mixins. Errores? Muchos. Aprendizajes? También. Aquí te dejo los principales de esta semana:

1. La sintaxis es clave

Uno de los errores más comunes que cometí fue no escribir correctamente la sintaxis de los mixins. Un pequeño error, como olvidar las llaves , no incluir @content, o lo peor de lo peor… olvidar el [;], puede hacer que el mixin simplemente no funcione.

❌ Error:

Por ejemplo, este código no funcionará porque falta [;] 🙄 después de @content:

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

✅ Solución:

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

Mera rabia jajaja

2. El orden y la posición del código importa

Otro error que cometí fue definir los mixins después de tratar de usarlos. Si defines un mixin después de incluirlo en otro bloque, SCSS no lo reconocerá y no se aplicarán los estilos.

❌ 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;
    }
}

✅ Solución: Declarar el mixin antes de usarse

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

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

Esto es de esas cosas que parecen lógicas cuando las lees (yo sintiéndome mal por mi yo del pasado), pero que no lo eran tanto cuando escribía mixins por primera vez 🙈.

3. Diseñar desde móvil primero funciona mejor para mí

Al principio, intenté hacer que mi diseño funcionara primero en pantallas grandes y luego ajustarlo a móviles, pero me di cuenta de que esto me generaba más problemas de los necesarios. Ahora, aplico la estrategia de "Mobile First", lo que significa que primero diseño para pantallas pequeñas y luego amplio el diseño para pantallas más grandes.

✅ Beneficios:

Me aseguro de que el diseño sea accesible en dispositivos móviles sin necesidad de sobreescribir muchas reglas.
Es más fácil escalar de pequeño a grande que al revés.
Reduce la cantidad de código innecesario en media queries.

Aquí hay un ejemplo de diseño "mobile first":

.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;
    }
}

En este caso, comenzamos con un diseño básico centrado para móviles y progresivamente agregamos cambios según el tamaño de la pantalla.

Ahora comparemos con un enfoque contrario, donde se comienza diseñando para escritorio y luego se intenta adaptar a móviles:

.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;
    }
}

En este caso, tenemos que sobrescribir varias propiedades como display y justify-content en móvil, lo que hace el código más engorroso y propenso a errores.

Al diseñar "mobile first", el código es más limpio y fácil de mantener. EN MI OPINIÓN.

Jajaja sé que el tema es controversial. Y es posible que cambie de opinión en el futuro. Pero eso qué importa ahora?

Lo que importa es… cuál es tu opinión? Incluye ejemplos donde el código fue más fácil para ti, ya sea que empieces por mobile, desktop… o tablet? (Uno nunca sabe).

En fin, si estás aprendiendo SCSS, espero que estos consejos te sean útiles y te ayuden a evitar los mismos errores que yo cometí. Byeee!