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 鈥渁lt-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鈥檚 the next:

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

Que belleza ese mixin鈥ue 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 鈥淪alvavidas鈥

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鈥檓 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鈥搃magen
.main__caja鈥揷ontenido

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!