Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Mixins

26/42
Recursos

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.

Aportes 42

Preguntas 7

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

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

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.

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.

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:

  1. 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.

  2. 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.

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;
}

SASS es mucho mejor que LESS

Declaracion

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

Lllamado de mixin

@include caja;

¿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 😮

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.

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

Tremenda herramienta.

Excelente ejemplo de los mixins.

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

Notas de la clase

Los mixin son una parte de código que es reutilizable en todo nuestro proyecto.

  • ¿Para qué sirven?

    Para reutilizar código ya escrito en otro lugar, ahorrar tiempo y modularizar para simplificar la lectura.

    para declarar un mixin

@mixin nombre

en el cual vamos a guardar los aspectos en común para modularizar.

@mixin caja {
    border-radius: 20px;
    box-shadow: 0 20px 33px 0 rgba(0,0,0,0.20);
    color: color$color-primario;
    background-color: $color-claro;
}
  • ¿Dónde usarlo?
    Se declaran en el archivo global y se usan en los diferentes modulos que dan estilo a la página.

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.

muy interesante el tema de los mixins y los extends creo que falto hablar de la diferencia entre ellos y el cuidado al usar los mixins para no generar demasiado código duplicado al compilarlo, gracias a los compañeros que comentaron sobre el tema asi me entere yo jajaja

@Mixin: Un mixin le permite hacer grupos de declaraciones CSS que desea reutilizar en todo su sitio. Incluso puede pasar valores para hacer que su mezcla sea más flexible

@Extends: El uso de @extend le permite compartir un conjunto de propiedades CSS de un selector a otro.

‘Extend’ puede implementarse en ‘mixin’ (parece que ‘mixin’ es una extensión de ‘extend’

// @extend
.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  @extend .message;
  border-color: green;
}

.error {
  @extend .message;
  border-color: red;
}

.warning {
  @extend .message;
  border-color: yellow;
}

// @mixin
@mixin message($color) {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
  border-color: $color;
}

.success { @include message(green); }

.error { @include message(red); }

.warning { @include message(yellow); }

y más porque las mezclas tienen parámetros. pero, por otro lado, el CSS procesado no es exactamente el mismo. pero tendrá el mismo efecto de estilo en el DOM.

/* extend processed */
.message, .success, .error, .warning {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333; }

.success {
  border-color: green; }

.error {
  border-color: red; }

.warning {
  border-color: yellow; }

/* mixin processed */

.success {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
  border-color: green; }

.error {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
  border-color: red; }

.warning {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
  border-color: yellow; }

es correcto dejar los mixins en el archivo global o no seria mejor tenerlo en un archivo aparte?

-Es una parte del código que es reutilizable

Consejo
-Debería de revisar que partes del proyecto pueden usar mixins antes de hacer algo

@mixin (nombre del mixin){
(declaraciones de los estilos o propiedades que tendrá el selector)
}

EJEMPLO

@mixin caja {
border-radius: 20px;
color: $color-primario;
bakcground-color: $color-claro;
}

Como usarlo??

-Dentro del selector le agregamos

h2{
@include caja;
}

Cuando usarlo?
-Personalmente creo que solo cuando analizamos el proyecto y sabemos mas o menos en que partes se reutilizara una cantidad de propiedades para es estilo pero que no serán iguales todas por lo tanto aparte del mixin tendrá otras propiedades que las diferenciaran como un cambio en un color en especifico o algo así.

Los mixins permiten definir estilos reutilizables en toda la hoja de estilos sin tener que recurrir a clases CSS no semánticas del tipo .float-left. Los mixins también pueden contener reglas CSS y cualquier otro elemento definido por Sass. Los mixins incluso admiten el uso de argumentos, como si fueran funciones, para poder modificar su comportamiento y ofrecer así una mayor flexibilidad.

Los mixins se definen con la directiva @mixin seguida del nombre del mixin (y opcionalmente una lista de argumentos) y seguida por el bloque de contenidos que definen los estilos del mixin.

Los mixins se incluyen en las hojas de estilos mediante la directiva @include seguida del nombre del mixin y opcionalmente por una lista de argumentos. El resultado es que todos los estilos definidos por el mixin se incluyen en el mismo punto en el que se llama al mixin.

Muy bonitos los mixins, como decian por ahi es como una variable que almacena codigo en vez de un valor. Asi como un objeto en js.

Es muy interesante saber de mixins y las funciones que se pueden armar… sería bueno aprender muchos más ejercicios.

Yo tuve un problema con la versión nueva de Prepros(7), no me estaba agregando los prefijos. Afortunadamente tenía por ahí el instalador de la versión anterior. Si les llega a pasar, puede ser debido a un bug en la versión del Prepros.

como dijo el profe, ahí se vio el poder de usar un pre-procesador

Estoy emocionada de concluir!!!

Cuando inspeccioné mi código sí se compiló en Prepros pero no hizo el autoprefixer. Alguien sabe por qué? les agradezco

alguien sabe porque no me sirve los autoprefixer ![](

Genail, cada vez mejor

Creo que los prefix son para los de pago!!

Para que sirven los valores de box shadow?
0px ==>
20px ==>
33px ==>
0px ==>

Perfecto, seguimos! 😄

cada ves les agarro mas amor a lo preprocesadores y les encuentro mas utilidades

Me parece que el profesor quería hacer esto en el rgba en el box-shadow cuando esta creando el mixin con el color primario

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

En el minuto 5:00 cuando el profesor queria agregar el color, la forma que me funciono fue:

rgba($color: $nameVariableColor, $alpha: valorOpacidad);
Ej:
box-shadow: 0 20px 33px 0px rgba($color: $color-primario, $alpha: 0.50);

@mixin caja {
  border-radius: 20px;
  box-shadow: 0 20px 33px 0px rgba($color: $color-primario, $alpha: 0.50);
  // recuerda las variables siempre al final
  color: $color-primario;
  background-color: $color-primario;

}

Excelente

Buena clase

f

En el minuto 5:00 el profe intenta utilizar la variable color claro pero se equivoco de simbolo, escribio @ en ves de $, por lo tanto el box-shadow con la variable queda asi

box-shadow: 0px 20px 33px 0px rgba($color-claro, 0.5);

Mixin

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

Guau, nunca había visto el realmente poderoso potencial que tienen los preprocesadores. Yo (personalmente) me quedo con sass.

Oigan, ¡Esperen! al compilar código sass, el css resultante ya incluye los prefijos para que los soporte los navegadores 🤯. Eso ahorra muchos dolores de cabeza con el tema de la compatibilidad.