Skip to content
Alebat

Mixins en SCSS

Los mixins en SCSS son una herramienta poderosa para la reutilización de código y la creación de componentes DRY (Don’t Repeat Yourself). Permiten definir estilos CSS que pueden ser reutilizados en toda la hoja de estilo sin la necesidad de recurrir a clases no semánticas o redundantes. Los mixins pueden contener reglas CSS completas y casi cualquier cosa permitida en un documento Sass, incluyendo la capacidad de pasar argumentos, similar a las funciones [0][1].

Sintaxis Básica

Para definir un mixin, se utiliza la directiva @mixin seguida del nombre del mixin y cualquier argumento que desee pasar. Los mixins se incluyen en el contexto actual utilizando la regla @include, que puede ser escrita como @include <nombre> o @include <nombre>(<argumentos...>) [0].

@mixin rtl($property, $ltr-value, $rtl-value) {
  #{$property}: $ltr-value;


  [dir="rtl"] & {
    #{$property}: $rtl-value;
  }
}


.sidebar {
  @include rtl(float, left, right);
}

Argumentos y Valores Por Defecto

Los mixins pueden aceptar argumentos, y estos pueden tener valores por defecto. Esto permite una mayor flexibilidad al reutilizar el mixin en diferentes contextos [0].

@mixin square($size, $radius: 0) {
  width: $size;
  height: $size;


  @if $radius != 0 {
    border-radius: $radius;
  }
}


.avatar {
  @include square(100px, $radius: 4px);
}

Content Blocks

Los mixins pueden aceptar bloques de contenido, permitiendo la inyección de estilos CSS adicionales en el lugar donde se invoca el mixin. Esto se logra utilizando la regla @content dentro del mixin y pasando el bloque de contenido usando llaves {} [0].

@mixin media($types...) {
  @each $type in $types {
    @media #{$type} {
      @content ($type);
    }
  }
}


@include media(screen, print) using ($type) {
  h1 {
    font-size: 40px;
    @if $type == print {
      font-family: Calluna;
    }
  }
}

Consideraciones Prácticas

  • Simplicidad: Evita el abuso de los mixins. Mantén tus mixins simples y fáciles de entender. Si un mixin se vuelve demasiado grande, considera dividirlo en partes más pequeñas [1].
  • Mixins Sin Argumentos: Para mixins que no necesitan parámetros o cuyos argumentos tienen valores por defecto, puedes omitir los paréntesis al invocarlos [1].
  • Manejo de Prefijos de Proveedores: En lugar de crear mixins personalizados para manejar prefijos de proveedores, se recomienda utilizar herramientas como Autoprefixer, que mantienen el código CSS actualizado y manejan los prefijos de manera más eficiente [1].

Los mixins son una parte esencial de la escritura eficiente de SCSS, facilitando la reutilización de código, la organización y la mantenibilidad de las hojas de estilo.