¿Qué es un mixin en CSS?

Waos, los mixins son extends mejorados 🤯🎉

Creo que los mixins podrían usarse para combinaciones de estilos frecuentes como las fuentes.
Normalmente en un sitio web se diferencian ciertos tipos como títulos o párrafos. Y cada uno tiene un tamaño, un weight, un line-height… diferentes pero que son comunes entre ellos.
Ahí sería muy útil un mixin.

Por si les sirve:

Definición de un Mixin:

• Los mixins son bloques de código reutilizables que encapsulan conjuntos de propiedades y estilos.

• Utiliza @mixin seguido de un nombre para definir un conjunto de reglas de estilo reutilizable.

  @mixin formato-botones {
    font-size: 14px;
    padding: 8px 16px;
    border: 1px solid #ccc;
    background-color: #f0f0f0;
    color: #333;
  }
  
  

Uso del Mixin en una Regla:

• Emplea @include seguido del nombre del mixin para aplicar sus reglas en una regla específica.

  .boton-primario {
    @include formato-botones;
    background-color: #3498db;
    color: #fff;
  }
  
  

Resultado después de Compilación:

• El CSS resultante incluirá las propiedades del mixin junto con las propiedades adicionales de la regla.

  .boton-primario {
    font-size: 14px;
    padding: 8px 16px;
    border: 1px solid #ccc;
    background-color: #3498db;
    color: #fff;
  }
  
  

Mixins con Parámetros:

• Los mixins pueden aceptar parámetros para hacerlos más dinámicos y reutilizables en diversos contextos.

  @mixin formato-botones-con-color($color-fondo, $color-texto) {
    background-color: $color-fondo;
    color: $color-texto;
  }
  
  .boton-personalizado {
    @include formato-botones-con-color(#3498db, #fff);
  }
  
  

• En el ejemplo, $color-fondo y $color-texto son parámetros que permiten personalizar el fondo y el color del texto del botón.

Interesante el @mixin

@mixin mobile {
  @media screen and (orientation: portrait) and (width < 573px) {
    @content;
  }
}

Lo interesante de mixin es que podemos tenerlo en cuenta para crear moléculas y organismos, considerando que es un conjunto de atomos. esto es siempre y cuando estemos haciendo uso de **Atomic Design. **

vi otra clase y no supe que era el mixin espero en esta ocacion comprenderlo, ya que este curso esta super