Skip to content
Alebat Multiverticales

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

Section titled “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

Section titled “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

Section titled “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

Section titled “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.