Condicionales y Loops

Clase 34 de 42 • Curso de Preprocesadores CSS

Clase anteriorSiguiente clase

Resumen

Un condicional nos permite evaluar cierta condición y bifurcar entre dos caminos dependiendo de si se cumple o no.

Un loop es un fragmento de código que va a ejecutar de forma repetitiva hasta que cumpla una condición.

Imagen del reto

Manuel Alejandro Aguilar Téllez Girón

student•

Chicos, este es el contenido de las noticias

"noticias", "pes 2020 obtiene acuerdo con el manchester united", "Konami ha anunciado que han firmado un acuerdo con el club de futbol inglés Manchester United para ser incluido en el juego."

"noticias", "cyberpunk: habrá dos juegos más", "El estudio polaco de videojuegos CD Projekt está trabajando no en uno, sino en tres juegos ubicados en el universo RPG de Cyberpunk."

"noticias", "Mortal Kombat 11: Filtración confirma al Joker como DLC", "Usuarios han investigado el más reciente parche de la versión para PC de Mortal Kombat 11 donde se incluyen datos del Joker, Terminator."

Espero les ayude ;)

Miguel Angel Martelo Quiroz

student•

Muchas gracias.

Abdiel Ortega

student•

Héroe sin capa

Miguel Angel Lozano Alvarez

student•

mms yo diciendo que las clases eran rápidas y tenia la velocidad a 1.75 :v

Germán González

student•

xDDDDDDDDDDDDDDDDDDDDDDDDDD

Addi Alberto Salazar Espinosa

student•

jajajjjajajajaja

Ildebrando Mora Valdes

student•

Al trabajar con Staylus se generan muchos errores por identacion, y al trabajar en produccion se puede volver muy tedioso

Luis Miguel Falcon Montaño

student•

Prettier indenta y limpia el codigo correctamente por ti para que no te pasen esos errores.

https://prettier.io/

Luis Angel

student•

Solo es cuestión de práctica y concentración, ya que la sintaxis es parecida a la de Python en cuanto a identación, siendo ese lenguaje bastante usado al día de hoy a pesar de a cualquiera se le podría generar errores por identar mal

Byron Mesias Cueva Cabrera

student•

Reto finalizado: Código

Para solucionar el reto hice dos cosas:

Agregue los 3 items mas a mi lista de datos en la variable de pug, sin su atributo de imagen.
Añadi un condicional if que valide si existe el dato imagen se agrege o no.

Addi Alberto Salazar Espinosa

student•

Super! :D

Kevin Andres Curruchich Xocop

student•

Yo lo pense de la misma manera, creo que cambia un poco en la forma como lo resolvimos

Y le agrege un margin-bottom

Francisco Contreras

student•

Para realizar el reto hice lo siguiente:

En el archivo ejercicio-stylus.pug duplique la section de contenido:

html
	include head.pug
	body
		.buscador: form: input(type="text" placeholder="Playstation" class="buscador__input")
		header.encabezado--con-filtros
			h2 20 Resultados para "Playstation"
			.filtros
				span Filtrar Por
				a(href="#" class="fa fa-th-large")
				a(href="#" class="fa fa-bars")
		section.contenido
			+caja("apex.jpg", "Video", "Apex Legends Temporada 2: un nuevo trailer muestra cambios al mapa", "Dos nuevos trailers de Apex Legends muestran lo que nos espera en la Temporada 2 del battle royale de Respawn.")
			+caja("crash.jpg", "Video", "Ya salio la reseña de Crash Team Racing Nitro Fueled", "Veinte años después del lanzamiento del original, Crash Team Racing ha recibido un remake total que logra mantener todos los aspectos originales.")
			+caja("ff.jpg", "Video", "Final Fantasy XIV recibirá una serie live-action en televisión ", "Final Fantasy XIV Online recibirá una adaptación aTV de parte de Square Enix con Sony Pictures Television y Hivemind.")
		section.contenido
			+caja2( "Noticias", "Pes 2020 obtiene acuerdo con el manchester united", "Dos nuevos trailers de Apex Legends muestran lo que nos espera en la Temporada 2 del battle royale de Respawn.")
			+caja2( "Noticias", "Cyberpunk 2077: habrá dos juegos más", "Veinte años después del lanzamiento del original, Crash Team Racing ha recibido un remake total que logra mantener todos los aspectos originales.")
			+caja2( "Noticias", "Mortal kombat 11: filtración confirma al joker como dlc", "Final Fantasy XIV Online recibirá una adaptación aTV de parte de Square Enix con Sony Pictures Television y Hivemind.")

Posteriormente en el archivo head.pug cree un nuevo mixin llamado caja2:

mixin caja(imagen, category, title, summary)
	.caja
		a(href="#",class="caja__imagen"): img(src="../images/"+imagen)
		.caja__contenido
			span.caja__categoria=category
			h3=title
			p=summary
		+estadistica

mixin caja2(category, title, summary)
	.caja
		.caja__contenido
			span.caja__categoria=category
			h3=title
			p=summary
		+estadistica

mixin estadistica
	.estadistica--articulos: ul
		li
			i.fas.fa-share
			span 275
		li
			i.fas.fa-eye
			span 275
		li
			i.fas.fa-comment-alt
			span 12

doctype html
html
	head
		title PlatziGames
		meta(charset='utf-8')
		meta(http-equiv='X-UA-Compatible', content='IE=edge')
		meta(name='viewport', content='width=device-width, maximum-scale=1.0, user-scalable=no')
		link(rel="stylesheet",href="https://fonts.googleapis.com/css?family=Lato:400,400i,700,700i|Oswald:400,500,600,700&display=swap" )
		link(rel='stylesheet', href='../css/ejercicio-stylus.css')
		script(src='https://kit.fontawesome.com/552ebddad2.js')
	body```


Y listo :)

Joel Vicente Nieto Gómez

student•

Que increíble solución.

Sebastian Moreno Olivera

student•

Muchas gracias, fue muy buena la solución

Héctor Eduardo López Carballo

student•

Dupliqué la section contenido e hice una condicional.

section.contenido
			+caja("", "Noticias", "PES 2020 obtiene acuerdo con el manchester united", "Konami ha anunciado que han firmado un acuerdo con el club de futbol ingles Manchester United para ser incluido en el juego." )
			+caja("", "Noticias", "Cyberpunk 2077: Habrá dos juegos más" ,"El estudio polaco de videojuegos CD Projekt Red está trabajando no en uno, sino tres juegos ubicados en el universo RPG de Cyberpunk" )
			+caja("", "Noticias", "Mortal Kombat 11: Filtración confirma al Joker como DLC", "Usuarios han investigado el más reciente parche de la versión para PC de Mortal Kombat 11 donde se incluyen datos del Joker..." )

Al código existente solo puse la condicional (imagen). Si no existe, se devuelve el mismo código sin el contenedor de imagen.

mixin caja(imagen, category, title, summary)
	if(imagen)
		.caja
			a(href="#",class="caja__imagen"): img(src="../images/"+imagen)
			.caja__contenido
				span.caja__categoria=category
				h3=title
				p=summary
			+estadistica
	else
		.caja
			a(href="#",class="caja__imagen")
			.caja__contenido
				span.caja__categoria=category
				h3=title
				p=summary
			+estadistica

Armando Rivera

student•

Es buena esa solución pero estás repitiendo código, yo lo haría de esta manera en el condicional

mixin caja(imagen, category, title, summary)
	.caja
		if(imagen)
			a(href=&quot;#&quot;,class=&quot;caja__imagen&quot;): img(src=&quot;../images/&quot;+imagen)
		.caja__contenido
			span.caja__categoria=category
			h3=title
			p=summary
		+estadistica

Héctor Eduardo López Carballo

student•

Tienes mucha razón! D:

Carlos Humberto Taracena Sandoval

student•

en la parte de Pug duplique el contenido e hice un mixin (al que llamé mediaCaja) solo le quite el parámetro imagen y la parte del a, y en stylus no hice ningun cambio

mixin

NEXU QUISPE HUAMAN

student•

Lo mismo hice¡

Daniel Sánchez

teacher•

Imagen del reto:

Addi Alberto Salazar Espinosa

student•

Bien :)

Marco Antonio Coelho Aguayo

student•

Si te sale el error de "<expected “indent”, got “ident h”> al compilar:"

Mi solución fue copiar y pegar el código del maestro, sé que es rarísimo ya que yo lo tenía tal cual, no cambia absolutamente nada, pero cuando yo lo hago me arroja el error, y caundo lo copio y pego si me deja guardarlo.

¯_(ツ)_/¯

Alejandro Ramos

student•

2 años después y sigue pasando XD

Carlos Dugarte

student•

El siguiente código me arroja un error <expected "indent", got "ident h"> al compilar:

for header in 3 2 1
  h{header}
    font-size: 35px - (5*header)
    margin: 0

Alguien podría decirme si se le presentó el mismo problema y cómo lo pudo solucionar?

Rodrigo Angel Zucchini

student•

pudiste solucionarlo????

Luis Antonio Márquez Castro

student•

Hola! Sé que ya han pasado unos meses de haber hecho esa pregunta.

La forma en que yo lo solucioné fue la siguiente:

Cambiando de lugar el ciclo, como te muestro a continuación.

fuente1 = "Lato", sans-serif
fuente2 = "Oswald", sans-serif
color-primario = #333333
color-secundario = #8841DA
color-claro = #FFFFFF

contenedor()
	display: flex
	width 90%
	margin: 0 auto
	padding 30px 0

caja-sombra()
	background-color color-claro
	box-shadow 0px 20px 33px 0px rgba(0, 0, 0, 0, 0.20)

opacidad(color, nivel)
    alpha color, nivel
* 
	box-sizing: border-box

body
	margin: 0
	font-family: fuente1

for header in (3 2 1)
	h{header}
		font-size 35px - (5*header)
		margin 0px

Luis Antonio Márquez Castro

student•

Hola! Para aquellos que tengan el problema

' expected "indent", got "for" '

La forma en que yo lo solucioné fue la siguiente:

Cambiando de lugar el ciclo, como te muestro a continuación.

fuente1 = "Lato", sans-serif
fuente2 = "Oswald", sans-serif
color-primario = #333333
color-secundario = #8841DA
color-claro = #FFFFFF

contenedor()
	display: flex
	width 90%
	margin: 0 auto
	padding 30px 0

caja-sombra()
	background-color color-claro
	box-shadow 0px 20px 33px 0px rgba(0, 0, 0, 0, 0.20)

opacidad(color, nivel)
    alpha color, nivel
* 
	box-sizing: border-box

body
	margin: 0
	font-family: fuente1

for header in (3 2 1)
	h{header}
		font-size 35px - (5*header)
		margin 0px

Hidetochi Junior

student•

también me sucedió, gracias

Gonzalo Ceron Denetro

student•

Al contenedor de los artículos le agregue un flex-wrap para que pueda ser responsive

CSS

/*Mixin*/
contenedor(alinear)
 width 100%
 display flex
 justify-content alinear


.contenido 
 contenedor(space-evenly)
 flex-wrap wrap

John Ruiz

student•

Hola @Gonzalo,

He intentado hacerlo resposive pero no logro, podrías compartir tu código para entender como lo lograste.

Gracias.

Gonzalo Ceron Denetro

student•

Holaa @john-ruiz, si claro te paso el código. Espero te sirva HTML

<main>
        <section class="buscador">
            <div class="buscador__contendor">
                <span><i class="fas fa-search"></i></span>
                <input type="text" class="buscador__contenedor--input" placeholder="Buscar...">
            </div>
        </section>
        <section class="results">
            <div class="results__filter">
                <div>
                    <h2 class="results__title">Recomendados</h2>
                </div>
                <div class="filter-icon-container">
                    <h4 class="results__filter--title">Filtrar por</h4>
                    <a href="#">
                        <i class="fas fa-th-large results__filter--icon"></i>
                    </a>
                    <a href="#">
                        <i class="fas fa-bars results__filter--icon"></i>
                    </a>
                </div>
            </div>
            <div class="articulos-recomendados">
                <article class="articulo">
                    <a href="#">
                        <img src="https://static.platzi.com/media/tmp/class-files/git/platzi-games-stylus-publico/platzi-games-stylus-publico-clase-5-loops/images/apex.jpg" alt="">
                    </a>
                    <div class="articulo__info">
                        <span class="articulo__info--categoria">Video</span>
                        <h3 class="articulo__info--titulo">Apex Legends Temporada 2: un nuevo trailer muestra cambios al mapa</h3>
                        <p class="articulo__info--desc">Dos nuevos trailers de Apex Legends muestran lo que nos espera en la Temporada 2 del battle royale de Respawn.</p>
                    </div>
                    <div class="articulo__icons-container">
                        <ul>
                            <li><i class="fas fa-share"></i></li>
                            <li><i class="fas fa-eye"></i></li>
                            <li><i class="fas fa-comment-alt"></i></li>
                        </ul>
                    </div>
                </article>
                <article class="articulo">
                    <a href="#">
                        <img src="https://static.platzi.com/media/tmp/class-files/git/platzi-games-stylus-publico/platzi-games-stylus-publico-clase-5-loops/images/crash.jpg" alt="">
                    </a>
                    <div class="articulo__info">
                        <span class="articulo__info--categoria">Video</span>
                        <h3 class="articulo__info--titulo">Ya salio la reseña de Crash Team Racing Nitro Fueled</h3>
                        <p class="articulo__info--desc">Veinte años después del lanzamiento del original, Crash Team Racing ha recibido un remake total que logra mantener todos los aspectos originales.</p>
                    </div>
                    <div class="articulo__icons-container">
                        <ul>
                            <li><i class="fas fa-share"></i></li>
                            <li><i class="fas fa-eye"></i></li>
                            <li><i class="fas fa-comment-alt"></i></li>
                        </ul>
                    </div>
                </article>
                <article class="articulo">
                    <a href="#">
                        <img src="https://static.platzi.com/media/tmp/class-files/git/platzi-games-stylus-publico/platzi-games-stylus-publico-clase-5-loops/images/ff.jpg" alt="">
                    </a>
                    <div class="articulo__info">
                        <span class="articulo__info--categoria">Video</span>
                        <h3 class="articulo__info--titulo">Final Fantasy XIV recibirá una serie live-action en televisión </h3>
                        <p class="articulo__info--desc">Final Fantasy XIV Online recibirá una adaptación aTV de parte de Square Enix con Sony Pictures Television y Hivemind.</p>
                    </div>
                    <div class="articulo__icons-container">
                        <ul>
                            <li><i class="fas fa-share"></i></li>
                            <li><i class="fas fa-eye"></i></li>
                            <li><i class="fas fa-comment-alt"></i></li>
                        </ul>
                    </div>
                </article>
                <article class="articulo">
                    <div class="articulo__info">
                        <span class="articulo__info--categoria">Noticia</span>
                        <h3 class="articulo__info--titulo">pes 2020 obtiene acuerdo con el manchester united</h3>
                        <p class="articulo__info--desc">Konami ha anunciado que han firmado un acuerdo con el club de futbol inglés Manchester United para ser incluido en el juego.</p>
                    </div>
                    <div class="articulo__icons-container">
                        <ul>
                            <li><i class="fas fa-share"></i></li>
                            <li><i class="fas fa-eye"></i></li>
                            <li><i class="fas fa-comment-alt"></i></li>
                        </ul>
                    </div>
                </article>
                <article class="articulo">
                    <div class="articulo__info">
                        <span class="articulo__info--categoria">Noticia</span>
                        <h3 class="articulo__info--titulo">cyberpunk: habrá dos juegos más</h3>
                        <p class="articulo__info--desc">El estudio polaco de videojuegos CD Projekt está trabajando no en uno, sino en tres juegos ubicados en el universo RPG de Cyberpunk.</p>
                    </div>
                    <div class="articulo__icons-container">
                        <ul>
                            <li><i class="fas fa-share"></i></li>
                            <li><i class="fas fa-eye"></i></li>
                            <li><i class="fas fa-comment-alt"></i></li>
                        </ul>
                    </div>
                </article>
                <article class="articulo">
                    <div class="articulo__info">
                        <span class="articulo__info--categoria">Noticia</span>
                        <h3 class="articulo__info--titulo">Mortal Kombat 11: Filtración confirma al Joker como DLC</h3>
                        <p class="articulo__info--desc">Usuarios han investigado el más reciente parche de la versión para PC de Mortal Kombat 11 donde se incluyen datos del Joker, Terminator.</p>
                    </div>
                    <div class="articulo__icons-container">
                        <ul>
                            <li><i class="fas fa-share"></i></li>
                            <li><i class="fas fa-eye"></i></li>
                            <li><i class="fas fa-comment-alt"></i></li>
                        </ul>
                    </div>
                </article>
            </div>
        </section>
    </main>
</body>
</html>```



CSS
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  font-size: 62.5%;
}
main {
  width: 100%;
}
.buscador {
  width: 100%;
  height: 250px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url("https://images.pexels.com/photos/924824/pexels-photo-924824.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940");
  background-size: cover;
}
.buscador__contendor {
  width: 70%;
  height: 60px;
  background: #fff;
  border-radius: 40px;
  padding: 20px;
}
.buscador__contenedor--input {
  width: 80%;
  border: none;
  outline: none;
  background: none;
  font-family: 'Lato', sans-serif;
  font-size: 1.6rem;
}
.fa-search {
  margin-right: 8px;
  font-size: 1.8rem;
  color: #808080;
}
.results {
  width: 100%;
  padding: 14px;
  background: #fff;
}
.results__title {
  font-family: 'Oswald', sans-serif;
  font-size: 2.6rem;
  color: #333;
  text-transform: uppercase;
}
.results__filter {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.results__filter--title {
  margin-right: 10px;
  font-family: 'Lato', sans-serif;
  font-size: 1.6rem;
  color: #333;
}
.filter-icon-container {
  display: flex;
  align-items: center;
  padding: 4px;
  border-radius: 10px;
  box-shadow: 0px 1px 4px 0px rgba(51,49,49,0.722);
}
.results__filter--icon {
  font-size: 2rem;
  color: #333;
  margin: 0 10px;
}
.articulos-recomendados {
  width: 100%;
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
}
.articulo {
  max-width: 380px;
  margin: 20px 10px;
  border-radius: 20px;
  box-shadow: 0px 1px 4px 0px rgba(51,49,49,0.722);
  position: relative;
}
.articulo a img {
  width: 100%;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}
.articulo__info {
  padding: 10px;
  margin-bottom: 10px;
}
.articulo__info--titulo {
  font-family: 'Oswald', sans-serif;
  font-size: 2rem;
  color: #333;
  text-transform: uppercase;
}
.articulo__info--desc {
  font-family: 'Lato', sans-serif;
  font-size: 1.4rem;
  color: #333;
  line-height: 1.5;
}
.articulo__info--categoria {
  font-size: 1.2rem;
  text-transform: uppercase;
  font-family: 'Lato', sans-serif;
  font-weight: bold;
  color: #8841da;
}
.articulo__icons-container {
  padding: 10px 20px;
}
.articulo__icons-container ul {
  width: 80%;
  padding: 10px 0;
  margin: 0 auto;
  display: flex;
  justify-content: space-evenly;
  position: absolute;
  bottom: 0;
}
.articulo__icons-container ul li {
  list-style: none;
}
.fa-share,
.fa-eye,
.fa-comment-alt {
  font-size: 1.8rem;
  color: rgba(51,51,51,0.4);
}

Wilson Sánchez

teacher•

¡Que buenas respuestas al reto! Aplausos a todos 👏👏 Que alegria ver sus trabajos y como ponen en practica lo aprendido.

marco antonio cespedes mamani

student•

Solo una reutilización de los mismos estilos de stylus y agregando en pug un mixin similar al ya existente. Y no pude subir mi imagen resultante

Israel Urbina

student•

aquí el reto y después de probar todos creo que me quedo con sass fue el que mas me gusto xD, aun que los tres están muy buenos

Addi Alberto Salazar Espinosa

student•

Creo que igual #Sass

Kenneth Angulo L

student•

Para resolver el reto hice los siguientes pasos:

En head.pug, agrege un unevo mixin

mixin caja-sin-foto(category, title, summary)
	.caja-sin-foto
		.caja__contenido
			span.caja__categoria=category
			h3=title
			p=summary
		+estadistica

En ejercicio-stylus.pug, las noticias se escriben asi:

+caja-sin-foto("noticias", "pes 2020 obtiene acuerdo con el manchester united", "Konami ha anunciado que han firmado un acuerdo con el club de futbol inglés Manchester United para ser incluido en el juego.")

En el modulo cajas styl, extiendo el estilo de .caja asi:

.contenido
	margin-bottom: 40px
	contenedor-grid()

.caja
	max-width: 400px;
	caja-sombra()
	&__contenido
		padding: 20px;
		background-color: color-claro
		span
			color: color-secundario
			titulos(Fuente2)
		h3
			font-weight: normal
			titulos(Fuente2)

.caja-sin-foto
	@extends .caja

y finalmente en globales.styl

contenedor-grid()
	display: grid
	grid-template-columns: repeat(3, 1fr)
	grid-template-rows: auto
	gap: 20px
	width: 90%
	margin: 0 auto
	padding: 30px 0

Alejandro Tangarife Rivas

student•

Yo opto por modificar el código lo menos posible, y más fácil adaptar el flujo de las cajas para poder ser Responsive.

Así lo hice:

mixins.styl

// MIXINS
contenedor()
    width: 96%
    display: flex
    flex-wrap: wrap // Permitiendo que el contenido caiga dependiendo del ancho total de la página
    margin: 0 auto
    padding: 30px 0

cajas.styl

.contenido
    margin-bottom: 40px
    justify-content: space-evenly
    grid-row-gap: 70px // Agregando el espacio entre lineas flecha

    contenedor()

mixins.pug

mixin caja(imagen, category, title, summary)
	.caja
		if (imagen)  // Esto evalúa si contiene imagen y la agrega en caso de ser verdadero
			a(href="#",class="caja__imagen"): img(src="../images/"+imagen)
		.caja__contenido
			span.caja__categoria=category
			h3=title
			p=summary
		+estadistica

cajas.pug

+caja("apex.jpg", "Video", "Apex Legends Temporada 2: un nuevo trailer muestra cambios al mapa", "Dos nuevos trailers de Apex Legends muestran lo que nos espera en la Temporada 2 del battle royale de Respawn.")

+caja("crash.jpg", "Video", "Ya salio la reseña de Crash Team Racing Nitro Fueled", "Veinte años después del lanzamiento del original, Crash Team Racing ha recibido un remake total que logra mantener todos los aspectos originales.")

+caja("ff.jpg", "Video", "Final Fantasy XIV recibirá una serie live-action en televisión ", "Final Fantasy XIV Online recibirá una adaptación aTV de parte de Square Enix con Sony Pictures Television y Hivemind.")

+caja("", "Noticias", "Pes 2020 obtiene acuerdo con el Manchester United", "Konami ha anunciado que ha firmado un acuerdo con el club de futbol inglés Manchester United para ser incluido en el juego")

+caja("", "Noticias", "Cyberpunk 2077: Habrá dos juegos más", "EL estudio polaco de videojuegos CD Projeckt está trabajando no en uno, sino tres juegos ubicados en el universo RPG de Cyberpunk.")

+caja("", "Noticias", "Mortal Kombat 11: Filtración confirma al Joker como DLC", "Usuarios han investigado el más reciente parche de la versión para PC de Mortal Kombat 11 donde se incluyen datos de Joker y Terminator.")

El código completo lo tengo segmentado en diferentes componentes.

Dennis Bejar Challco

student•

Estaba escribiendo asi y no compilaba

for header in 3 2 1 h{header} font-size: 35px - (5*header) margin: 0

hasta que escribi asi:

for header in 3 2 1 { h(header) font-size: 35px - (5*header) margin: 0 }

Andrea Lozano Cataño

student•

Como apenas estoy aprendiendo me apoyé en las respuestas de mis compañeros. La de @Francisco914 me pareció la más resumida porque solamente duplicó la sección de contenido (ejercicio-stylus.pug) y creó un nuevo mixin llamado caja2 (head.pug)

Carlos Roberto Villatoro Barrios

student•

Para cumplir el reto, cree un mixin con la clase. caja__noticia, el cual hereda los estilos de .caja. Elimine la sección de imagen y al contenedor se le coloco un display flex y un wrap para que cada caja ocupé su espacio.

No puedo publicar imágenes pero estará en mí Twitter