Mixins

Clase 26 de 42 • Curso de Preprocesadores CSS

Resumen

Su finalidad es ofrecer una funcionalidad que pueda ser reutilizada en otras clases pero que no está pensada para usarse de forma autónoma. Nos permite crear bloques reusables de código que cambian su resultado dependiendo del parámetro que enviemos.

Con los mixin logramos escribir menos código, produciendo un código más claro, más expresivo y sobre todo más fácil de mantener.

Mauro Quinteros

student•

https://www.ombushop.com/blog/diseno-web/mixins-vs-herencia-en-sass.html

Les comparto este blog donde indica la diferencia de los @extend y los mixins a la hora de compilar el código a css

Efraín Hernández García

student•

Muy bueno, definitivamente resolvió unas dudas que tenia

Maricruz Pizaña Solano

student•

Está excelente, muchísimas gracias por el aporte.

Alberth Fabian Perez Mendivelso

student•

La única diferencia que veo entre los mixins y los extens es que los mixins desde el principio se sabe que vamos a reutilizar este contenido en otro momento en cambio con los extens no se considero desde el principio sino que mas adelante nos dimos cuenta que podemos utilizar las characteristics de otra clase de manera que la extendemos.

Maricruz Pizaña Solano

student•

Buena observación!

Jair Partida

student•

Como yo lo entiendo es que un **mixin ** funciona como una variable pero con mas de un selector, ademas se pueden cambiar los parámetros.

Addi Alberto Salazar Espinosa

student•

Buen concepto :D

Maricruz Pizaña Solano

student•

Same

sergio vargas

student•

Si se fijan, los conceptos de Extends y Mixins son muy parecidos. Vamos a explicar dos diferencias entre ellos que son claves para un entendimiento más claro:

Una de las mayores diferencias con los Extends, es que los Mixins pueden recibir argumentos, los cuales te permitirán producir una gran variedad de estilos con unas simples líneas.
La impresión en CSS de los Mixins, no es la misma que tienen los Extends. Estos se imprimen separados en cada uno de los lugares donde fueron declarados.

Ya tenemos un poco más claro cuales son las diferencias entre estas importantes características de Sass. Recuerden, los Extends los usaremos para compartir fragmentos de estilos idénticos entre componentes y los Mixins para reutilizar fragmentos de estilos que puedan tener un resultado diferente en cada lugar donde los declaremos.

Irving Juárez

student•

Yo creo que no son tan parecidos, en primero, por el nombre, en segunda, porque el @mixin

Encapsula un bloque de código que se le aplica a ciertos elementos. Cuando cambia el mixin, cambian todos los elementos.

. Mientras que el @extend

Nos permite que se herede una clase original a otra. Entonces, si se cambia la clase original, todas que tienen un extend de esa clase van a cambiar.

Miguel Angel Reyes Moreno

student•

SASS es mucho mejor que LESS

Addi Alberto Salazar Espinosa

student•

De acuerdo contigo! :D

Maricruz Pizaña Solano

student•

Opino lo mismo

Kevin J. Zea Alvarado

student•

En el minuto 4:50, el profesor intenta poner la variable de color primario en el box-shadow, pero lo hace utilizando @. A mí me funcionó con el $.

@mixin caja {
    border-radius: 20px;
    box-shadow: 0px 20px 33px 0px rgba($color-primario, 0.5);
    color: $color-primario;
    background-color: $color-claro;
}

Mauricio Serginho Matias Conde

student•

el profe debe utilizar mas less que sass

Franklin Peñafiel

student•

Me pasó lo mismo, por un momento me olvidé de $ por estar usando el @ para usar import y mixin. fue solo una confusión, luego me di cuenta

Sebastian Heredia

student•

Declaracion

@mixin caja{
    color: $fuente1;
    background-color: #3f579a;
}

Lllamado de mixin

@include caja;

Cristian Córdova

student•

¿Alguien sabe como hace para que en el navegador, cuando le da a "Inspeccionar" se le abra en una nueva ventana? Al igual que al profe del curso :O

Gabriel De Andrade

student•

Tienes que tener seleccionado esta opción en dockside que aparece cuando le das en los tres puntitos :D

Alberto Castro Flores

student•

Hay algo que no entiendo, se disena el website primero y luego se pasa a sass o somo funciona?

CRISTIAN BARBERO PÉREZ

student•

Según tengo entendido en un equipo de trabajo profesional es así. El diseñador le pasa el diseño al desarrollador y éste lo "traduce" a código HTML y CSS (utilizando preprocesadores o no).

Kevin J. Zea Alvarado

student•

Sí, la idea es que primero se cree el diseño y, después, los desarrolladores construyen o maquetan el diseño. De esta forma, ya se sabe exactamente el resultado esperado.

Respecto al uso de preprocesadores o no, dependerá de cada equipo de trabajo si desean usarlos o no.

Jeferson Velásquez

student•

Diferencia entre mixins y extends al momento de compilar

Carlos Massarino

student•

Buenas, alguien podría explicarme qué son los prefixes? Entiendo que los pone prepros, pero no me queda clara su función

Mauro Nava

student•

Lo que hacen es solucionar discrepacias entre navegadores, ya que en ocasiones hay estilos que no funcionan en x navegador pero si en otros.

Raúl Adolfo Sánchez Rodríguez

student•

MIXINS en SASS

Detectar un mixin
Declarar un mixin utilizando at-rule de SASS: @mixin
Utilizar mixin en CAJA 1 (utilizando at-rule de SASS: @include)
Utilizar mixin en CAJA 2 (utilizando at-rule de SASS: @include)
Utilizar mixin en CAJA 3 (utilizando at-rule de SASS: @include)

++Fuente:++ Documentacion SASS

Andres Velasquez

student•

Diferencias entre mixin y extends:

Los mixing pueden llamar variables exclusivas y crearse para un fin determinado.
Los extend replican lineas de código ya definidas y no permiten modificarse, solo si se modifica la fuente inicial.

Jiovanni Romo

student•

Es un aporte pequeño, pero he notado que el profesor copia directamente el código (como las variables) y después lo pega. Si quieres ahorrarte un par de segundos (que a la larga ayuda a tu velocidad para codificar), les recomiendo usar las sugerencias de VS Code, en Linux y WIndows solo presiona ctrl + space bar y tendras muchas sugerencias, entre ellas las variables y un pequeño shortcut para crear los mixins.

MIguel Oviedo

student•

Para mi, Mixin agrupa parametros que vamosa utilizar en otras partes de nuestro proyecto e incluso puede almacenar variables que dan flexibilidad para reusar código.

El @extend es mas especifico para elementos con características compartidas, que se pueden copiar y pegar

Irving Juárez

student•

El @mixin agrupa propiedades, lo de parámetros me parece que viene en las funciones

Anfernee Valera

student•

Te equivocas Irving, Si lees la documentación los Mixins pueden recibir parámetros. Simplemente que por alguna razón el profesor no explico esa parte de la funcionalidad.

Te dejo un codigo de sass con mixin

@mixin theme($theme: DarkGray) {
  background: $theme;
  box-shadow: 0 0 1px rgba($theme, .25);
  color: #fff;
}

.info {
  @include theme;
}
.alert {
  @include theme($theme: DarkRed);
}
.success {
  @include theme($theme: DarkGreen);
}

Jose Morales Varon

student•

Tremenda herramienta.

Pablo Verduzco

student•

Excelente ejemplo de los mixins.

Gonzalo Pimentel

student•

Ese tema de @include se parece mucho a la de pug

Obed Paz

student•

Tengo una duda, esto no nos genera un CSS muy grande y redundante? 😕 Con CSS puro lo que suelo hacer cuando veo que unos estilos se repiten en diferentes elementos es que creo una clase independiente con esos estilos, y se la agrego a los elementos que tienen esos estilos en comun, ademas de su clase individual. El problema que veo con los extends y mixins es que al CSS compilado le repite los mismos estilos en diferentes clases, haciendo un CSS largo y redundante.

Jeremy Palomino

student•

Es cierto que en partes del codigo que se compila parezca redundante, pero lo será para el navegador no para el programador. Tú iras trabajando de manera limpia, mientras el navegador,que lee el archivo css, le tocará hacer la tarea sucia.

Saludos :D

Gustavo Gonzalez Montero

student•

Técnicamente un @extend es lo mismo que un @mixin?

Sneyder Barreto

student•

¡Hola!

Con ambas reglas podemos heredar estilos, sin embargo, no son iguales. La regla @extend nos permite heredar los estilos de una clase y asignar esos mismos estilos a otra regla CSS. Aunque con un @mixin se puede lograr el mismo objetivo, los mixins nos permiten trabajar más lógica. Pueden recibir argumentos para modificar los estilos que encapsula, entre otras cosas. Aquí te dejo la documentación de los mixins.

Un saludo.