Mixins

Mixins = Reusar código.

Vengo de la documentación y ahora los mixins se aplican con paréntesis:

.caja {
	max-width: 430px;
	.sombra-caja();
	&__contenido {
		padding: 25px;
		background-color: @color-claro;
	}
	span {
		color: @color-secundario;
		.Oswald();
	}
	a {
		text-decoration: none;
		color: @color-variacion;
		.Oswald();
	}
}

Para pasar parametros al mixin

.general-box-shadow(@color){
  box-shadow:0px 5px 15px 0px fade(@color,50%);
}

Para invocar

    .general-box-shadow(@secondary-color);

Por regla en el código, todas las variables y los mixin deben ir al final

Me ha gustado mas Less que Pug 😛

Para esta fecha 01/10/2021 - MM/DD/YYYY los mixins se tienen que llamar de esta forma .sombra-caja(); si no le pones los parentesis al final no van a funcionar!

Mixins a profundidad: http://lesscss.org/features/#mixins-feature

• Uso de parentesis

• Selectores internos

• Uso con !important

• Pasarle parametros al mixin

• y más poder con less

Tengo que aceptar, es maravilloso trabajar con prepros. La duda es saber cómo trabajar con javascript, y react.

excelente que chevre carajo

Hola!
Solo quería decir que según la documentación de less, ahora los mixins se deben declarar con ()

.border(@radius) {
    border-radius: @radius;
}

div{
    .border(20px);
}

Lo cual significa que tenemos la opción de parametrizarlos y darles mas poder 😁

Mixins

Un mixin es cuando tenemos estilo o propiedades que pueden ser utilizadas por diferentes elemenos en distintos partes.

// Asi se crean varibales en Less
@color-primario: #333333;
@color-claro: #FFFFFF;
@color-secundario: #8841DA;
@color-variacion : #012179;
@Fuente1:'Lato',sans-serif;
@Fuente2:'Oswald',sans-serif;
@Fuente-base : 18px;

//Esto es un mixins por que se utiliza varias veces
.sombra-caja {
    box-shadow: 0px 5px 15px 0px fade(@color-primario,50%);
}

*{
    box-sizing: border-box;
}

body{
    margin: 0;
    font-family: @Fuente1;
    color: @color-primario;
    line-height: @Fuente-base + 10%;
}

h1,h2,h3 {
    font-family: @Fuente2;
    text-transform: uppercase;
    margin: 0;
}

Usando el mixin

.contenedor--cajas{
    width: 1400px;
    margin: 0 auto;
    display: flex;
    justify-content: space-evenly;
}

.caja {
    max-width: 430px;
    .sombra-caja; //llamando mixin

    &__contenido{
        padding:25px;
        background-color: @color-claro;
    }
    span{
        color: @color-secundario;
    }
    a{
        text-decoration: none;
        color:@color-variacion;
    }
}

No entendí cuando dijo que “por regla, todas las variables y los mixins deben ir hasta el final” pero no lo colocó al final de todas las etiquetas, sino debajo de “max-width”, o no se si refiere al final pero del proceso?

Tengan en cuenta que momento de crear los mixin, los mismo se crean con los corchetes: {}

.sombra-caja {
    box-shadow: 0px 5px 15px 0px fade(@color-primario, 50%);
}

Y al momento de ejecutarlos los mismo deben de hacerse con paréntesis ()

.intro {
    width: 1340px;
    height: 650px;
    padding: 10px;
    margin: 0 auto;
    position: relative;
    background-color: @color-claro;
    .sombra-caja();
    &__imagen {
        width: 1320px;
        position: absolute;
        img {
            width: 100%;
            height: 624px;
            object-fit: cover;
        }
    }

Resultado:

Qué tremenda esta clase… Genial.

Excelente, cada ves se pone mejor

Genial! se parece más a lenguaje de programación

Por regla en el código con Less, todos los mixin y funciones deben de ir hasta el final en la sección a modificar.

Hola Soy El Señor Mixins

Los mixins son similares a las funciones de los lenguajes de programación. Los mixins son un grupo de propiedades CSS que le permiten usar propiedades de una clase para otra clase e incluyen el nombre de la clase como sus propiedades. En LESS, puede declarar un mixin de la misma manera que el estilo CSS usando el selector de clase o id. Puede almacenar varios valores y se puede reutilizar en el código siempre que sea necesario.

Mixins en Less

En terminos generales, los mixins en Less cumplen la misma funcionalidad que los mixins en Pug, sin embargo, hay unas leves variaciones.
.

Mixin en pug

// Como se declara
mixin caja(parameter1)
  .caja
    p ...
    h2 #{parameter1}

// Como se utiliza
+caja(parameters)

Mixin en less

// Como se declara
.mixin__name{
  your: estyles;
}

// Como se utiliza
p{
  .mixin__name;
}

Las principales diferencias, es que en Less los mixin son muy parecidos a una clase comun y corriente de css. Eso puede ser un poco confuso. Sin embargo, al momento de utilizarla, solo tenemos que poner el nombre del mixin y ya esta.

fall in love --> Less

si js ya permite decidir cuando usar el punto y coma no deberia ser igual con los pre-procesadores de css ?

En tiempos de coronavirus, aprender es lo mejor 😃

cajas.less

.contenedor--cajas{
    width: 1400px;
    margin: 0 auto;
    display: flex;
    justify-content: space-evenly;
}

.caja {
    max-width: 430px;
    .sombra-caja; //llamando mixin

    &__contenido{
        padding:25px;
        background-color: @color-claro;
    }
    span{
        color: @color-secundario;
        .Oswald;
    }
    a{
        text-decoration: none;
        color: @color-variacion;
        .Oswald; //mixin siempre despues de la variable
    }
}

Muy parecido a pug en la forma que funciona. No en la sintaxis

Esto definitivamente le da mucho poder a CSS y ahorra mucho trabajo

Sigamos 😄

Muy bueno! 😄

Me gustaron mucho los mixins con preprocesadores.

Mala idea haberle puesto “.Oswald” al Mixin 😕

Esto de los Mixins me recuerda a las clases en JavaScript…

Me encanto la practica, solo yo llamé al mixin .oswald como .fuente2 para que tenga coherencia y no hacerlo dependiente de la tipografía

excelente, son muy utiles los mixins, ayuda mucho a hacer código mas facil y rapido

¡Esta bien chévere Less!!!. Me habia desanimado con Pug un poco por que lo vi un poco innecesario.

Buena la de los mixin en less

Se declara con un “.”

.sombra-caja {
  box-shadow: 0px 5px 15px 0 px fade(@color-primario, 10%);
}```

en la parte de categorías a la hora de colocar el mixin, debe ir debajo de el color, el mismo dijo que es recomendable que siempre fueran de ultimo

Para los que no puedan compilar el mixin y les salga un error es por que debe ser llamado con la siguiente sintaxis.

.sombra-caja();