Uso de Mixins en SAS para Simplificar Estilos en CSS
Contenido del curso
----- ----
Cristian Contreras
Nestor Rios Garcia
Edwin García
Jesus Vladimir Reyes Zamora
Nestor Rios Garcia
Pablo Alejandro Figueroa
Juan Esteban Gallego Bolivar
Miguel de la Cruz
Beder Danilo Casa Condori
Pablo Alejandro Figueroa
Christopher Armando Jiménez Valverde
Diego Andrés Lopez Rodriguez
Kenneth Angulo L
Juan Dema
Juan Martin Rodriguez
Pablo Alejandro Figueroa
Pablo Alejandro Figueroa
Pablo Alejandro Figueroa
Jean Carlos Rodríguez
Ariel Hernán Contini
Juan Antonio Delgadillo Carrillo
Waos, los mixins son extends mejorados 🤯🎉
A mi se me asemeja a las clases en JS.
Exacto, se acercan más a la función constructora
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.
La verdad apenas ayer empecé con el curso de Sass, estoy aprendiendo.
Tengo entendido que las diferencias son: La herencia es más organizada en el css output Los mixins pueden recibir parámetros
Entonces el factor a tomar en cuenta para saber si usar mixins o herencia **principalmente ** sería si se va a personalizar o no, si usarás parámetros o no
Concuerdan con mi punto de vista?? Estoy aprendiendo jeje
Por si les sirve:
Gracias, me sirve.
messirve 😎👌
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.
Un ejemplo de un mixin en SASS podría ser para crear un botón estilizado. Aquí tienes cómo se vería:
@mixin boton($color, $padding: 10px) { background-color: $color; color: white; padding: $padding; border: none; border-radius: 5px; cursor: pointer; &:hover { opacity: 0.8; } } // Para usar el mixin .btn-primary { @include boton(#007bff); } .btn-secondary { @include boton(#6c757d, 15px); }
En este ejemplo, boton es un mixin que recibe un color y un padding como argumentos. Se puede reutilizar en diferentes clases.
Para aquellos que conocen JavaScript, me recuerdan los mixins a las funciones para poder reutilizar el código con diferentes valores pasados como parámetros.
Los mixins en Sass son una característica que permite definir estilos reutilizables que se pueden incluir en otros selectores. Los mixins ayudan a evitar la repetición de código y a mantener el CSS más limpio y modular.
Notas de otra clase:
SASS also lets you do something similar to JavaScript functions
@mixin btn($col: #444) {
background: $col;
border-radius: 5px;
...
}
.btn {
@include btn;
}
.btn-primary {
@include btn($col: #3ab5e9);
color: yellow;
}
consulta, donde puedo ver el codigo porque tengo un error en las imagenes que se ubican verticales y no puedo encontrarlo. gracias
En la primer clase podes ver en los recursos el código como también el repo
Interesante el @mixin
@mixin mobile { @media screen and (orientation: portrait) and (width < 573px) { @content; } }
Codigo en el repositorio de Github
platzi/cursos-sass (github.com)
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
