Mixins
Clase 21 de 42 • Curso de Preprocesadores CSS
Contenido del curso
Deymer Hernandez
student•
hace 6 años
Maricruz Pizaña Solano
student•
hace 6 años
Hugo Alejandro Franco López
student•
hace 5 años
Clase 21 de 42 • Curso de Preprocesadores CSS
Contenido del curso
Deymer Hernandez
Maricruz Pizaña Solano
Hugo Alejandro Franco López
Cristian Iñiguez
Gutierrez Diego
Raul Contreras
Miguel Angel Soler
Maricruz Pizaña Solano
Kevin Andres Curruchich Xocop
Angel leon
Luis Antonio Martínez Cárcamo
David Alejandro Mosquera Moreno
Addi Alberto Salazar Espinosa
Maricruz Pizaña Solano
Paulina Nieves
Juan Manuel Velez
John Edward León Muñoz
Addi Alberto Salazar Espinosa
Maricruz Pizaña Solano
Raycris Maldonado
Anfernee Valera
Arturo Mauricio Terceros Beltrán
Sebastián Olaya Escobar
Omar Daniel Centeno
Miguel Di Massimo Nieto
Miguel Ángel Bolaños Quiñonez
Juan Gui Arenas
Christian Velázquez
Gabriel De Andrade
Christian Velázquez
Jhonatan David Ibarra Lavado
Raúl Adolfo Sánchez Rodríguez
Beto Toro
Mauro Alejandro García Larios
Beto Toro
Leobardo Manuel García Cruz
Kevin Andres Curruchich Xocop
Kevin Andres Curruchich Xocop
Jesus Federico David Herrera
Gutierrez Diego
Moisés Cedeño
Platzi Team
Mixins = Reusar código.
Más fácil, imposible.
puede verse muy similar ocn variables, clarmaente la variable seria el valor que le damos al box-shadow, en este caso seria toda la linea de codigo resumida en un mixi, o más lineas podría ser.
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(); } }
En efecto mi querido amigo, solo agrego que se aplican de esa manera al momento de llamarlos.
Creo que vale la pena tener mucho cuidado con los mixins por que pueden haber mucha duplicidad de código después de compilar a css...
Si alguien me puede decir como utilizar de forma adecuada los mixins por favor que alguien me diga..
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);
Gracias :)
Gracias por el aporte, una ayuda mas para tener un codigo mas modular ✌✌
JA JA JA
Por regla en el código, todas las variables y los mixin deben ir al final
Buen dato! :D
Gracias por el dato.
Me ha gustado mas Less que Pug :P
uno es de css y el otro es de HTML, no se pueden comprar =P
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
Gracias! :D
Muy bueno, gracias :D
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!
la verdad es que funcionan de ambas formas. O así me sucedió a mi
Yes. funcionan de ambas formas.
Me podrian ayudar por favor, tengo el codigo igual al del profe y no logro solucionar este error :(
¡Hola! :)
Si pudieras compartirnos tu código sería más sencillo encontrar la solución. Puedes copiar y pegar utilizando el botón de </> código.
¡Saludos!
Hola,
Te recomiendo visitar este hilo de ayuda, presente en la anterior clase.
Saludos desde España!
box-shadow: 0px 5px 15px opx fade(@color-primario, 10%);
Hola Soy El Señor Mixins
Tengo que aceptar, es maravilloso trabajar con prepros. La duda es saber cómo trabajar con javascript, y react.
Si lo que quieres es añadir preprocesadores a un proyecto en JavaScript, te recomiendo que veas el Curso de Webpack :D
@GabrielElpidio Te agradezco la información.
excelente que chevre carajo
MIXINS
Declarar el MIXIN
Invocar el MIXIN donde sea requerido
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?
Creo que no se refiere a que los pongas al final de tu archivo sino que sea al final de tus estilos dentro de una clase, por ejemplo en el bloque de estilos de la clase .caja lo colocó como mencionas después de max-with siendo el mixin el último estilo dentro del bloque de la clase .caja, si te vas al archivo intros.less y revisas el bloque de estilos de la clase .intro, el mixin lo colocó al final también.
.intro { width: 1340px; height: 650px; padding: 10px; margin: 0 auto; position: relative; background-color: @color-claro; .sombra-caja; /*MIXIN*/ }
y tiene hasta más sentido jajaja. Muchas gracias @Mau 🙏🏼
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 😁
Uff, eso está genial 👌👌
Pero creo que si no le mandamos parametros al momento de usar los mixins no es necesario utilizar los parentesis 🤔
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; } }
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