No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Mixins

14/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 69

Preguntas 10

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

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>

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)

Los Mixins me dejo sin palabras 😑😁

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

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")

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...")

Que belleza ese mixin…que cosa mas buena ome

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

Declarando Mixin
Llamando Mixin

para los que no confiaban en pug

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

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

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])
        ```

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')

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

Deberian llamarlos “Salvavidas”

Mixins que belleza.

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

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

I’m Mr. Mixins ,look at me!!!

https://www.youtube.com/watch?v=l4iZtDBYkZA

Los mixins permiten crear bloques de codigo reutilizable

PUG:

//- Declaration
mixin list
  ul
    li foo
    li bar
    li baz
//- Use
+list
+list

HTML:

<ul>
  <li>foo</li>
  <li>bar</li>
  <li>baz</li>
</ul>
<ul>
  <li>foo</li>
  <li>bar</li>
  <li>baz</li>
</ul>

Pug es bueno, pero algo que me esta estresando son los espacios -_- >.< que estresante cuando me da error por no hacer bien los espacios

tengan cuidado de usar guines normales (-) en los nombres de las variables, a mi me dio error e hizo q me trabe por un buen tiempo

Me enamoré de los mixins, diooooooossssss 😮

Interesante!

Me gusto esta parte, justo acabo de terminar el curso practico de react y es muy similar al momento de mapear la card, reusemos codigo 😃👌

Llamar los datos directamente de un array de objetos:
.
Declaramos el array

-var cards = {'Subtitulo 1': 'Lorem ipsum dolor sit amet 111.', 'Subitulo 2': 'Lorem ipsum dolor sit amet 222.', 'Subtitulo 3': 'Lorem ipsum dolor sit amet 333.'}

.
Iterar en todos los objetos

each contenido, sub_titulo in cards 
+caja("imagen.png",sub_titulo, contenido)

Mixins !!, now we are talking !!
Ahora que empezamos a ver estas caracteristicas de programacion es que apreciamos el poder de este preprocesador.
.
Cuando se trabaja con sitios web estaticos, esto es una maravilla ahorra mucho tiempo, ya me estoy imaginando, tener bibliotecas de componenetes para no tener que repetir codigo.
.
En sitios web dinamicos, aun no encuentro utilidad para pug, cada tecnologia en particular tiene su forma de presentar la informacion en pantalla. (Ejemplo laravel se integra muy bien con blade, en el frontend react se defiende bien con jsx.).
.
OK esa fue mi apreciacion hasta el momento, vamos a ve que nos depara el futuro.

Excelente, nos ahorramos tiempo ya que al modificar el mixin se modifica cada parte en la que se utiliza este código repetido.

Note que puedo usar los métodos de JS:

main.contenido
	each t in titulos.slice(1)
		+caja(t, textDefault)

**Mixin **

Son variables que permiten agregar más contenido con menos líneas.

¿Cómo usarlo?

Toma el contenido que necesites replicar:

main.contenido
      .caja__imagen: img(src="/images/imagen.png")
      .caja__contenido
        h3 #{titulos[1]}
        p #{contenidoCorto}

cortalo y ve a la parte superior de tu código.

Este es el código que se quiere replicar:

.caja__imagen: img(src="/images/imagen.png")
      .caja__contenido
        h3 #{titulos[1]} 
        p #{contenidoCorto}

Declara mixin

Ejemplo:
mixin nombreDelMixin
Pegas el codigo que quieras replicar.

mixin caja
      .caja__imagen: img(src="/images/imagen.png")
      .caja__contenido
        h3 #{titulos[1]} 
        p #{contenidoCorto}

Vas a la zona donde quieras replicar y llamas al mixin:

Ejemplo:
+nombreDelMixin

+caja

Si deseamos agregar contenido diferente del que tenemos en el mixin debemos hacer lo siguiente

Ejemplo:

Ingresamos en un () las variables que deseamos cambiar:

mixin caja(imagen, titulo, variable3)
      .caja__imagen: img(src="/images/"+imagen)
      .caja__contenido
        h3=titulo
        p=contenido
        h3 #{titulo}
        p #{contenido}

y en la llamada:

+caja('imagen.png', titulos[1], contenidoCorto)

y así con cada bloque de código que querramos modificar.

AMO pug 💚🐶

Los mixins me convencieron!

Auténtica barbaridad, incluso para proyectos pequeños te facilita mucho utilizar esta metodología.

Para los que quieren usar un loop y no tener que escribir +caja 3 veces pero tener contenidos diferentes en cada caja:

-var titulos = ["Subtitulo 1", "Subtitulo 2", "Subtitulo 3"]
-var contenidos = ["Contenido de texto 1", "Contenido de texto 2", "Contenido de texto 3"]
-var i = 0
while i < 3
  +caja("imagen.png", titulos[i], contenidos[i++])

Eso nos da:

<div class="caja"> 
      <div class="caja__imagen"><img src="./images/imagen.png" alt=""/></div>
      <div class="caja__contenido">
        <h3>Subtitulo 1</h3>
        <p>Contenido de texto 1</p>
      </div>
    </div>
    <div class="caja"> 
      <div class="caja__imagen"><img src="./images/imagen.png" alt=""/></div>
      <div class="caja__contenido">
        <h3>Subtitulo 2</h3>
        <p>Contenido de texto 2</p>
      </div>
    </div>
    <div class="caja"> 
      <div class="caja__imagen"><img src="./images/imagen.png" alt=""/></div>
      <div class="caja__contenido">
        <h3>Subtitulo 3</h3>
        <p>Contenido de texto 3</p>
      </div>

ayer no entendía pug, hoy lo amo

Que increíble poder implementar los Mixins
Les comparto mi código de esta parte

//- Declarando Variables
-let subtitulo = "Subtitulo"
-let subtitulos = [subtitulo+"1", subtitulo+"2", subtitulo+"3"]

//- Declarando un Mixin
mixin caja(imagen, subtitulo)
	.caja
		.caja__imagen: img(src="./images/"+imagen, alt="Icono de Imagen")
		.caja__contenido
			h3 #{subtitulo}
			p Lorem ipsum dolor, sit amet consectetur adipisicing elit Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vero hic ipsam non? Vero suscipit cumque, ratione dicta.


main.contenido
			each ele in subtitulos 
				+caja("imagen.png", ele)

Interesante

Corazón si creías que no era tan bueno el pre-procesador de HTML y ahora estas sin palabras.

Es como una función sin ser una función 😄

Creo que estoy entendiendo un poco mejor las diferencias entre mixin y variables.

  • Variables: Aquí podríamos agrupar los estilos que se repiten a lo largo de todo nuestro proyecto como colores, tipografías, tamaños, etc.

  • Mixin: Estos podríamos utilizarlas para crear por ejemplo componentes una sola vez y volver a reutilizar el código como tarjetas, botones, secciones que se repitan, etc. Además podemos usar las variables dentro de ellas.

Al menos estas fueron las utilidades y diferencias que pude encontrar, capaz habrán más pero, ya debemos experimentar un poco. 😃

Mixins en pug

Los mixins podemos verlos como una manera en la cual nosotros podemos tener un diseño ya preestablecido de una card o un elemento en html (el sueño de todo programador de html). Para entenderlo mejor, podemos verlo como el contenido de un tarjeta.
.
En esa tarjeta vamos a tener una foto, tres botones, contenido y un link externo. El problema es que esa tarjeta va a estar 100 veces en nuestra pagina web (imagine un e-commerce). En vez de crear 100 veces la misma card en el html, solo la creamos una vez con un mixin.
.
Claro que no todas las cards van a tener el mismo contenido. Por eso podemos usar parametros para ingresar distinto contenido a cada una de las cards. A continuacion un ejemplo de como reutilizar codigo a nivel dios:
.

¿Como reutilizar codigo a nivel dios con pug?

Voy a utilizar un mixin con la estructura de una card, además de que voy a usar un loop para hacerlo lo mas limpio posible:

DECLARAMOS AL MIXIN Y AL ARRAY
-var titulos = ["Titulo 1", "Titulo 2", "Titulo 3"]
mixin card(title)
  .caja
    .caja__imagen: img(src="images/imagen.png")
    .caja__contenido
      h3 #{title}
      p Lorem...

HTML
each item in titulos
  +caja(item)

Resultado:

Hasta ahora entiendo que PUG es mas para maquetacion. Como lo enlazo con el Back?

Yo también hice como los compañeros leonardopesinaviles y carlosalba
mis clases son:
.main__caja–imagen
.main__caja–contenido

Mixin == function()?

Empece odiando PUG pero ya me esta empezando a gustar, muy interesante.

Mi duda aquí es, como se haría con css al momento de querer dar estilos. En este ejercicio porque el archivo ya lo tenía hecho pero cuando debes comenzar desde cero como se haría?

Interesante 😃

Excelente

me gustaron mucho los mixins son de mucha utilidad

Los Mixins son iguales a los conponentes de React!

Excelente

Como se identa, se echa el codigo para atras?

mixins!!

Esto es muy util!

Y si no quiero cambiar contenido y quiero cambiar clases de la caja? como llamo la variable en las cajas?

Escribiendo la cantidad de palabras que quieren que muestre el comando lorem.
’#’ = numero de palabras

lorem#

ej

lorem5

Es realmente muy bueno!!

estupendooooo muy prometedor este curso 😄

Esto seria una aplicacion para patrones no?
Osea toda una sección que tenga el mismo estilo

MIXINS
Son funciones que nos permiten devolver mini-estructuras o componentes. Hay muchas estructuras repetitivas de diseño web a eso les podemos llamar componentes de UI. Para eso son los misiás par tener estructuras empaquetadas y poder reutilizarlas cuando necesitemos.

Maravillosa clase, sigamos 😄

Vamos bien! A seguirle! 😃

-var titulo = 'PlatziGames'
-var subtitulo = 'Subtitulo principal'
-var arrayTitulos = ['Subtitulo 1', 'Subtitulo 2', 'Subtitulo 3']
-var usuario = 'Alejandro'
//- los mixin son funciones que nos ayudaran a ahorrar tiempo y codigo
mixin caja(imagen,titulo,contenido)
    .caja
        .caja__imagen: img(src="images/"+imagen alt="imagen intro")
        .caja__contenido
            h3 #{titulo}
            p #{contenido}


doctype html
html
    head
        meta(charset="UTF-8")
        link(rel="stylesheet" href="css/ejercicio-pug.css")
    body
        header
            //- forma de llamar una variable 1
            h1 #{titulo}
            //- Utilizando un condicional
            if usuario
                a Hola #{usuario}
            else
                a.boton Registro
        section.intro
            //- el img: solo funciona cuando el elemento padre solo tiene un elemento hijo
            .intro__imagen: img(src="images/imagen.png" alt="imagen intro")
            .intro__contenido
                //- forma de llamar una variable 2 
                h2= subtitulo
                p Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aperiam nostrum rerum repellendus eius minima fuga enim facilis sapiente? Ea suscipit voluptas doloribus, hic iusto ipsam eveniet consectetur at sunt quisquam.
                    span
                        strong Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima sequi quod dolor aliquid perspiciatis nemo a veritatis.
                a.boton Leer Mas
        //- ul
        //-     each titulo in arrayTitulos
        //-         li=titulo
        main.contenido
            //- se esta haciendo un foreach y en cada elemento se ha utilizado un mixin
            each titulo in arrayTitulos
                +caja('imagen.png',titulo,'Lorem ipsum dolor sit amet consectetur')

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

Se crea un etiqueta donde se va a llamar el mixin crado ejemplo:

mixin caja
	.caja
		.caja__imagen: img(src="images/imagen.png")
		.caja__contenido
		h3 #{titulos[1}
		p lorem...

main.contenido
	+caja

HTML:
	<main class="contenido">
      <div class="caja">
        <div class="caja__imagen"><img src="images/imagen.png"/></div>
        <div class="caja__contenido"></div>
        <h3>subtitulo 1</h3>
        <p>orem ipsum dolor sit amet</p><a class="buton">Leer mas</a>
      </div>
	</main>

Para crear 3 cajas solo tendríamos que llamar al mixin 3 veces

main.contenido
	+caja
	+caja
	+caja

Esto nos serviría si el contenido no va a cambiar, pero si cambia, le agregamos variables al mixin para poder hacer modificaciones ejemplo:

Pug:
mixin caja(imagen,titulo,contenido)
	.caja
		.caja__imagen: img(src="images/"+imagen)
		.caja__contenido
		h3=titulo
		p=contenido
		a.buton Leer mas

main.contenido
			+caja('imagen.png',titulos[1],'orem ipsum dolor sit amet')
			+caja('imagen.png',titulos[2],'orem ipsum dolor sit amet')
			+caja('imagen.png',titulos[3],'orem ipsum dolor sit amet')

HTML:
	<main class="contenido">
      <div class="caja">
        <div class="caja__imagen"><img src="images/imagen.png"/></div>
        <div class="caja__contenido"></div>
        <h3>subtitulo 1</h3>
        <p>orem ipsum dolor sit amet</p><a class="buton">Leer mas</a>
      </div>
      <div class="caja">
        <div class="caja__imagen"><img src="images/imagen.png"/></div>
        <div class="caja__contenido"></div>
        <h3>subtitulo 2</h3>
        <p>orem ipsum dolor sit amet</p><a class="buton">Leer mas</a>
      </div>
      <div class="caja">
        <div class="caja__imagen"><img src="images/imagen.png"/></div>
        <div class="caja__contenido"></div>
        <h3>subtitulo 3</h3>
        <p>orem ipsum dolor sit amet</p><a class="buton">Leer mas</a>
      </div>
    </main>

Una cosa de locos lo de los mixin, son procesos que a futuro aceleran el flujo de trabajo

mixin caja(imagen,titulo,contenido)
 .caja
   .caja__imagen: img(src="images/"+imagen)
   .caja__contenido
     h3=titulo
     p=contenido
     a.boton Read More```

b

IMPORTANTE
-Creo que se puede hacer mas entendible el codigo asi

main.contenido
            each titulo in titulos
                if titulo != 'Titulo Principal'
                    +caja(titulo)

Interesante!