Mixins

Clase 14 de 42 • Curso de Preprocesadores CSS

Omar Guadarrama

student•

Si también usamos each nos ahorrariamos poner +caja tres veces:

each titulo in titulos
	+caja("imagen.png", titulo, 'Lorem ipsum dolor sit amet consectetur adipisicing elit')

Nos da:

<div class="caja">
	<divclass="caja__imagen"><imgsrc="../images/imagen.png"alt="imagen"/></div>
	<divclass="caja__contenido">
		<h3>Subtitulo 1</h3>
		<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
		<aclass="buton">Leer más</a>
	</div>
</div>
<div class="caja">
	<divclass="caja__imagen"><imgsrc="../images/imagen.png"alt="imagen"/></div>
	<divclass="caja__contenido">
		<h3>Subtitulo 2</h3>
		<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
		<aclass="buton">Leer más</a>
	</div>
</div>
<div class="caja">
	<divclass="caja__imagen"><imgsrc="../images/imagen.png"alt="imagen"/></div>
	<divclass="caja__contenido">
		<h3>Subtitulo 3</h3>
		<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
		<aclass="buton">Leer más</a>
	</div>
</div>

Efraín Hernández García

student•

Excelente ejercicio!

Addi Alberto Salazar Espinosa

student•

Interesante! :)

Sneider Sanchez

student•

Como comentó @Herkom podemos usar each para no repetir codigo. Asimismo ponemos agregar el lorem upsum a una variable para disminuir las lineas del codigo:

-var titulos = ["Subtitulo 1", "Subtitulo 2" , "Subtitulo 3"]
-var lorem = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ex mi, gravida sit amet imperdiet vel, sodales a mi. Proin sit amet tellus nec nisl bibendum ornare nec at augue. Integer semper feugiat varius."

(...)

      each i in titulos
        +caja('imagen.png', i, lorem)

Maricruz Pizaña Solano

student•

Gracias por el aporte ;)

Bernardo Aguayo Ortega

student•

caramba! me esta encantando pug!

Moises Rolando Machuca Valverde

student•

Los Mixins me dejo sin palabras 😑😁

Addi Alberto Salazar Espinosa

student•

x2 :O

Maricruz Pizaña Solano

student•

Ya somos tres.

Beto Toro

student•

Por si acaso con "alt-z" pueden ajustar el texto de lorem ipsum al ancho de la pantalla. Y ajusta todo, hasta links muy largos

Bernardo Aguayo Ortega

student•

Gracias bro!!

Oscar Yunior Huarza

student•

Buen dato bro

Juan Esteban Galvis

student•

Realicé el llamado a los mixin con un loop para no repetir el código 3 veces:

each InfoCajas in ArraySubtitulos
  +Card("imagen.png", InfoCajas, "Lorem ipsum dolor sit amet consectetur")

Platzi Team

student•

Ey! Genial copañero, gran aporte y muy interesante como aplicates dos clase, me parece fantastico

Addi Alberto Salazar Espinosa

student•

Super! :O

Andrés Antonio Azuara Portillo

student•

I made another solution not to call the mixin three times, and it's the next:

-var i = 1
while i < 4
	+caja("imagen.png", titulos[i++], "lorem...")

Francisco Javier Araujo de la Garza

student•

Solo funcionaria mientras la imagen y contenido sean los mismos en todos los elementos, en mi opinion creo que lo correcto seria crear un arreglo para cada variable

Carlos Lefin Henriquez

student•

fjaraujo. Esto si puede funcionar si tambien creamos una Array de: -imagenes [ ] -contenido [ ]

entonces podriamos hacer el recorrido como el del ejemplo

+caja("imagenes[ i++] ", titulos[ i++] "contenido[ i++] ")

Daniel Alejandro Romero

student•

para los que no confiaban en pug

Wilson Orlando Capacho Carmona

student•

Que belleza ese mixin...que cosa mas buena ome

Maricruz Pizaña Solano

student•

Opino lo mismo. :)

Jeremy Palomino

student•

**Tecnicamente, los mixin funcional como las funciones: **

Creamos bloques de codigo reutilizables
La mandamos a llamar
Podemos pasarle parametros

Irving Juárez

student•

Técnicamente, estas en lo correcto. Se agrega un input y nos arroja un output

Fabian Flores

student•

Declarando Mixin

Llamando Mixin

Asbel Jose Herrera Morales

student•

super el aporte. Pero creo que debes sacar +imagen de los " "

Nerio José Balza Durán

student•

Al comienzo del modulo pense que no seria tan necesario cambiar a pug, pero viendo las funcionalidades tan utiles que trae, no hay duda que si vale la pena el cambio

Emiliano David Vigna

student•

Si usamos el each, y en vez de colocar que tome los datos de un arreglo, podemos hacer un arreglo con los indices, y de esa forma cambiar los valores que deseemos pero en simultaneo

-var forEachArray = ["Subtitle 1","Subtitle 2","Subtitle 3"]
-var contenido = ["asdfasdf","werwerwer","Lorem6"]
-var images = ["imagen1","imagen2","imagen3"]
-var vector = ["0","1","2"]

    main.conenido 
        each pos1 in vector
            +caja(images[pos1] ,forEachArray[pos1],contenido[pos1])
        ```

Jaime Isaí Orellana Mejia

student•

Funciona muy bien, pero no entiendo como funciona ¿?

Emiliano David Vigna

student•

El each in primero genera la variable pos1 que le va asignar el valor que se encuentra en vector, y va hacer tantas asignaciones como longitud tenga el arreglo/variable. Como el arreglo vector, es 0,1,2, cuando llamo al mixing +caja(imagen[pos1], ...) estaria haciendo el siguiente loop:

Hace pos1 = 0 -> El 0 lo obtiene del primer valor del arreglo vector
Llama a +caja y en ++imagen[pos1]++ => imagen[0] por lo tanto entrega el valor de "imagen1"
Hace pos1 = 1 -> El 1 lo obtiene del segundo valor del arreglo vector
Llama a +caja y en ++imagen[pos1]++ => imagen[1] por lo tanto entrega el valor de "imagen2"

Y así repite el loop una vez mas. Espero haber sido claro. 🙂

Leo Montoya

student•

porque cuando cambio un dato en el html no se cambia en el pug?

Fernando Andres Muñoz Suazo

student•

Hola Leonardo, eso se debe a que el preprocesador funciona en una sola vía es decir de pug a html, pero no de html a pug. Recuerda que el archivo .pug es al final un proceso de JavaScript embedido, y el archivo .html no es más que eso, html.

Simón Arenas

student•

Justo iba a preguntar eso. Entonces no hay una forma de que se haga automáticamente?

Efraín Hernández García

student•

Esto cambia por completo mi perspectiva sobre pug. Esto es definitivamente hacer HTML con super poderes

Max Felipe Hess Alvarez

student•

los mixins son como funciones :)

Kevin Andres Curruchich Xocop

student•

Me siento mal de haber dicho en clases pasadas que no me gustaba Pug 😫😫😫

Daniel Alejandro Romero

student•

Aldo Miguel Ortiz Parodi

student•

14. Mixins:

Interesante el tema de los mixin, esto cada vez se asemeja más a un lenguaje de programación que a un lenguaje de marcado.

Les comparto el código de la clase.

Código PUG:

-var titulo = "Titulo Principal";
-var titulos = ["Título Principal", "Subtítulo 1", "Subtítulo 2", "Subtítulo 3"];
//-var usuario = "David";
mixin caja(imagen, titulo, contenido)
        .caja
            .caja__imagen: img(src="../images/"+imagen)
            .caja__contenido
                h3=titulo
                p=contenido
            a.buton Leer Mas
doctype html
html
    head
        meta(charset="UTF-8")
        link(rel="stylesheet", href="../css/ejercicio-pug.css")
    body
        header
            h1 PlatziGames
            if usuario
                a Hola #{usuario}
            else
                a.boton Registro
        section.intro
            .intro__imagen: img(src="../images/imagen.png")
            .intro__contenido
                h2 #{titulos[0]}
                p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias quos veritatis eligendi? Ex maiores rerum exercitationem consectetur, porro eaque culpa quisquam labore
                 span debitis ab esse doloremque, dolor odio unde tempora.
                a.boton Leer más
        ul
            each titulo in titulos
                li=titulo
        main.contenido
            +caja('imagen.png',titulos[1],'Lorem ipsum dolor sit amet')
            +caja('imagen.png',titulos[2],'Lorem ipsum dolor sit amet')
            +caja('imagen.png',titulos[3],'Lorem ipsum dolor sit amet')

Juan Ignacio Recofsky

student•

Deberian llamarlos "Salvavidas"

Christian David Sánchez

student•

Mixins que belleza.

Leonardo Pesina aviles

student•

¿Por que él hace: main.contenido .caja__imagen .caja __contenido? Siguiendo BEM, debió haber sido: main.contenido .main__caja__imagen .main__caja__contenido ¿O esta él en lo correcto, y si es así, no esta contradiciendo la metodologia BEM?

Roger Carlos Ariel Alba

student•

Hola!

Creo que el main no lo tomo en cuenta, me parece congruente tu propuesta pero creo que sería así:

.main__caja--imagen
.main__caja--contenido

Qué te parece?

Saludos!

Carlos Francisco Betancourt Requena

student•

Hola Leonardo, yo pienso que la clase "contenido" no puede usarse como un bloque, ya que esta misma clase puede ser usada como un "container", en donde defines un ancho máxico, el margen, el padding, etc. O bien, está clase puede ser utilizada nuevamente en otra página del sitio para envolver el contenido de un post, por ejemplo.

El maestro está usando como bloque la clase "caja", ya que le da independencia la componente que se compone de la imagen, título y descripción.

Todo esto tu lo defines, de la forma que te funcione mejor, pero como lo define el maestro creo que es una forma correcta y coherente.

Espero ser de ayuda; un saludo!

Mixins

Introducción

Qué aprenderás sobre preprocesadores

Conceptos básicos de CSS

Selectores de CSS

Evolución de las Tecnologías de Front-End

Introducción a los Preprocesadores

Metodologías para estructurar código

Introducción a BEM

Guías para creación y mantenimiento de código

Instalación de herramientas de compilación

Preprocesadores para HTML

Introducción a Pug

Sintaxis

Interpolación

Variables

Condicionales y Loops

Mixins

Includes y Extends

Finalizando ejercicio de Landing Page

Less

Introducción a Less

Anidamiento e imports

Variables

Funciones

Mixins

Finalizando ejercicio de página de artículos

Sass

Introducción a Sass

Variables

Imports y Extends

Mixins

Funciones

Condicionales y Loops

Finalizando ejercicio de perfil de usuario

Stylus

Introducción a Stylus

Variables

Mixins

Funciones

Condicionales y Loops

Desarrollo del proyecto Platzi Games

Introducción al proyecto

Plantillas modulares con PUG: Header

Plantillas modulares con PUG: Footer

Grid System con Sass

Mixins para manejo de fuentes responsivas

Funciones para media queries

Finalizando el proyecto

Conclusiones y Cierre

Conclusiones y Cierre