Ciclos FOR/EACH

Resumen

Por medio de la directiva each ustedes van a crear las clases usando el ciclo each. La directiva for se parece mucho a la directiva each.

Marcelo Sulca Nieto

student•

No se si soy el único. pero acabo de reprobar por tercera vez el examen -.-

Voy a dejar la solución de como crear un sprint:
Primero declaro las variables, teniendo en cuenta que cada imagen 24px de altura

$name-pais:peru brasil chile ecuador colombia bolivia Venezuela argentina Uruguay paraguay;
$icon-width: 24px;
$icon-height: 24px;
$icons: url('bandera-paises.png');
$i:0;

.sprite-pais {
   background-image: $icons;
   background-repeat: no-repeat;
   width:  $icon-width;
   height:  $icon-height;
   display: inline-block;
}

@each $sprite-pais in ( $name-pais ) {
  .bandera-#{ $sprite-pais } {
      background-position: ($i) 0;
  }
  $i: $i + $icon-height;
}

RESULTADO

.sprite-pais {
  background-image: url('bandera-paises.png');
  background-repeat: no-repeat;
  width: 24px;
  height: 24px;
  display: inline-block;
}
.bandera-peru {
  background-position: 0 0;
}
.bandera-brasil {
  background-position: 24px 0;
}
.bandera-chile {
  background-position: 48px 0;
}
.bandera-ecuador {
  background-position: 72px 0;
}
.bandera-colombia {
  background-position: 96px 0;
}
.bandera-bolivia {
  background-position: 120px 0;
}
.bandera-Venezuela {
  background-position: 144px 0;
}
.bandera-argentina {
  background-position: 168px 0;
}
.bandera-Uruguay {
  background-position: 192px 0;
}
.bandera-paraguay {
  background-position: 216px 0;
}

Harold David Avila Sabogal

student•

Que buen aporte

Diego Ortiz

student•

sprite* ("sprint" es el de SCRUM). Bueno saber en este punto que el examen va a estar difícil.

Fabricio Micheli

student•

Un dato adicional que es importante, es que el bucle for, tiene dos formas…
La primera:

@for $var from <inicio> to <fin>{ ... }

La segunda…

@for $var from <inicio> through <fin>{ ... }

En una usamos la palabra clave to y en la otra through.
¿Diferencia?
En el caso de to si iteramos con valores de 1 (inicio) a 5 (fin) el bucle iterará 4 veces (salvo la última vez cuando la condición no se cumple).
En el caso de through si iteramos con valores de 1 (inicio) a 5 (fin) el bucle repetirá 5 veces el ciclo (incluido el último).

Harold David Avila Sabogal

student•

Que buen aporte muchas gracias

Edward Fabian Martinez Aparicio

student•

Muy buen aporte

Sergio Toshio Minei

student•

for

@for $i from 1 to 5 {
  .class-#{$i} {
    &:before {
      content: "#{$i}"
    }
  }
}

Resultado:

.class-1:before {
  content: "1";
}

.class-2:before {
  content: "2";
}

...

.class-5:before {
  content: "5";
}

Pueden ver el resumen completo del curso aquí

Harold David Avila Sabogal

student•

Muchas gracias por tu resumen

Carlos Sanguino

student•

Gracias

Abdiel Ortega

student•

Reto cumplido si quieren una imagen de referencia les recomiendo este repositorio: World-Flag-Sprites

$flags:
  "mx" -576px -576px,
  "co" -960px -128px,
  "ar" -640px 0,
  "br" -896px -64px,
  "uy" -64px -896px,
  "us" 0 -896px,
  "cl" -768px -128px,
  "jp" -896px -384px,
  "cn" -896px -128px,
  "tr" -576px -832px;

%flag {
  width: 64px;
  height: 64px;
  background: url("../img/flags.png") no-repeat;
}

.flag {
  @extend %flag;
}

@each $name, $position-x, $postion-y in $flags {
  .flag__#{$name} {
    background-position: $position-x $postion-y;
    @extend %flag;
  }
}

Uriel Alberto Arevalo Franco

student•

Muy acertado su paorte, @abdieljortega. Afiancé mucho mejor las directivas @extend y @each. Gracias

Stalin Badillo

student•

Gracias, muy interesante esa forma :)

Andrés Alejandro Ramos Uyaban

student•

De que proyecto habla el profesor ?

Miguel Angel Reyes Moreno

student•

Acabo de ver 2 comentarios que dicen que es del curso de animaciones para la web.

Diego Fernando Rojas Quintero

student•

Yo hice mi reto asi:

En html

&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;es&quot;&gt;
&lt;head&gt;
  &lt;meta charset=&quot;UTF-8&quot;&gt;
  &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
  &lt;link rel=&quot;stylesheet&quot; href=&quot;css/Styles.css&quot;&gt;
  &lt;title&gt;banderas&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;section class=&quot;banderascontainer&quot;&gt;
    &lt;div class=&quot;banderascontainer__item Colombia&quot;&gt;bandera #1&lt;/div&gt;
    &lt;div class=&quot;banderascontainer__item Venezuela&quot;&gt;bandera #2&lt;/div&gt;
    &lt;div class=&quot;banderascontainer__item Ecuador&quot;&gt;bandera #3&lt;/div&gt;
    &lt;div class=&quot;banderascontainer__item Peru&quot;&gt;bandera #4&lt;/div&gt;
    &lt;div class=&quot;banderascontainer__item Brazil&quot;&gt;bandera #5&lt;/div&gt;
    &lt;div class=&quot;banderascontainer__item Chile&quot;&gt;bandera #6&lt;/div&gt;
    &lt;div class=&quot;banderascontainer__item Argentina&quot;&gt;bandera #7&lt;/div&gt;
    &lt;div class=&quot;banderascontainer__item Bolivia&quot;&gt;bandera #8&lt;/div&gt;
    &lt;div class=&quot;banderascontainer__item Cuba&quot;&gt;bandera #9&lt;/div&gt;
    &lt;div class=&quot;banderascontainer__item Uruguay&quot;&gt;bandera #10&lt;/div&gt;
    &lt;div class=&quot;banderascontainer__item Costarica&quot;&gt;bandera #11&lt;/div&gt;
    &lt;div class=&quot;banderascontainer__item El_Salvador&quot;&gt;bandera #12&lt;/div&gt;
  &lt;/section&gt;
&lt;/body&gt;
&lt;/html&gt;

En sass

//----------------------------------------------------------------
$paises: (&quot;Colombia&quot;, &quot;Venezuela&quot;, &quot;Ecuador&quot;, &quot;Peru&quot;, &quot;Brazil&quot;, &quot;Chile&quot;, &quot;Argentina&quot;, &quot;Bolivia&quot;, &quot;Cuba&quot;, &quot;Uruguay&quot;, &quot;Costarica&quot;, &quot;El_Salvador&quot;);

@each $pais  in $paises {
  .#{$pais}{
    background-image: url(&quot;/img/Flag_of_&quot;+$pais+&quot;.png&quot;);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
  }
}

//----------------------------------------------------------------
body {
  margin: 0;
  padding:20px;
}

main {
  width: 100vw;
  height: 100vh;
  border: 3px solid blue;
}

.banderascontainer{
  height: 100vh;
  width: 50%;
  display: grid;
  grid-template-columns: repeat(4, minmax(100px, 1fr));
  grid-template-rows: repeat(3,100px);
  gap: 20px;
  &amp;__item{
    width: auto;
    border: 1px solid red;
    justify-content: a
  }
}

Resultado en css

.Colombia {
  background-image: url(&quot;/img/Flag_of_Colombia.png&quot;);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.Venezuela {
  background-image: url(&quot;/img/Flag_of_Venezuela.png&quot;);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.Ecuador {
  background-image: url(&quot;/img/Flag_of_Ecuador.png&quot;);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.Peru {
  background-image: url(&quot;/img/Flag_of_Peru.png&quot;);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.Brazil {
  background-image: url(&quot;/img/Flag_of_Brazil.png&quot;);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.Chile {
  background-image: url(&quot;/img/Flag_of_Chile.png&quot;);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.Argentina {
  background-image: url(&quot;/img/Flag_of_Argentina.png&quot;);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.Bolivia {
  background-image: url(&quot;/img/Flag_of_Bolivia.png&quot;);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.Cuba {
  background-image: url(&quot;/img/Flag_of_Cuba.png&quot;);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.Uruguay {
  background-image: url(&quot;/img/Flag_of_Uruguay.png&quot;);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.Costarica {
  background-image: url(&quot;/img/Flag_of_Costarica.png&quot;);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.El_Salvador {
  background-image: url(&quot;/img/Flag_of_El_Salvador.png&quot;);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

body {
  margin: 0;
  padding: 20px;
}

main {
  width: 100vw;
  height: 100vh;
  border: 3px solid blue;
}

.banderascontainer {
  height: 100vh;
  width: 50%;
  display: grid;
  grid-template-columns: repeat(4, minmax(100px, 1fr));
  grid-template-rows: repeat(3, 100px);
  gap: 20px;
}
.banderascontainer__item {
  width: auto;
  border: 1px solid red;
  justify-content: a;
}

Andrés Campuzano Garzón

student•

Output:

.Colombia {
  background-position: 0px, 0;
}

.Korea {
  background-position: 40px, 0;
}

.Japon {
  background-position: 80px, 0;
}

.China {
  background-position: 120px, 0;
}

.Thaiwan {
  background-position: 160px, 0;
}

.US {
  background-position: 200px, 0;
}

Gustavo Adolfo

student•

Me podrian explicar que significa "&:before"?

Carlos Eduardo Gomez García

teacher•

Es el mismo elemento, pero en su pseudoclase :before, ese "&" hace referencia al mismo selector :D

Jhonathan Hartswings Saldarriaga Gallango

student•

Hola Gustavo!

El simbolo "&" se refiere a el padre del bloque (Se usa cuando trabajas con anidación) y la pseudo clase :before en muchos casos se utiliza para crear contenido en el DOM desde la hoja de estilos.

/* Add a heart before links */
a::before {
  content: "♥";
}

Stiven Jiménez

student•

Encontre la solucion en este video del canal de platzilab https://www.youtube.com/watch?v=dTbpqEn6AvU

Abdiel Ortega

student•

Te lo agradezco.

Platzi Team

student•

No sabía que era un sprite, pero acá una buena g¨´ia

Edwin Alberto Guerrero Acosta

student•

En el ciclo for también podemos usar through en lugar de to, la diferencia entre estos es que si se usa to, se excluye el número final; si se usa through, está incluido.

documentación oficial

Emerson Cedeño

student•

alguien tendrá la referencia (enlace) del curso al que el prof. hace mención para mejor entendimiento de los "sprites"?

Tobías Schwarz

student•

Es el curso de animaciones para la web.

Giorgio Ventura

student•

Leonidas lo explica en el capítulo del corazón de Twitter!

Miguel Angel Reyes Moreno

student•

Nunca mencionaron sprites en este curso. Y veo en los comentarios que hablan del curso de animaciones para la web pero ese curso está varios más adelante de este. ¿Está desorganizada la ruta de aprendizaje?

Alejandro J Araujo

student•

OJO!!! Lo que se esta haciendo es interpolar variables, no se esta escapando caracteres... son cosas muy pero que muy diferentes!

Abdiel Ortega

student•

Dónde puedo leer más de esto?

Jonatan Padilla

student•

Esta genial, me deja pensando en todo lo que podemos hacer con esta utilidad.

Daniel Esteves

student•

De hecho actualmente es una de las soluciones que mas se ha utilizado sprite png y sprite svg para poder mostrar cosas en los sitios web, más que todo se utilizan con iconos

Anthony Damián López Pedrozo

student•

Aquí mi solución al reto :D No coloqué las imagenes de las banderas por flojera no mas, pero no hay mucho misterio por hacerlo tampoco!

Código en Sass:

<$name-paises: Uruguay, Brasil, Argentina, Chile, Peru, Mexico, Colombia, Venezuela, España, EUA;
$i: 0;
$position: 30px;

@each $paises in $name-paises {
  .bandera-#{$paises} {
    background-position: $i 0;
  }
  $i: $i + $position;
}>

Código en CSS:

<.bandera-Uruguay {
  background-position: 0 0;
}

.bandera-Brasil {
  background-position: 30px 0;
}

.bandera-Argentina {
  background-position: 60px 0;
}

.bandera-Chile {
  background-position: 90px 0;
}

.bandera-Peru {
  background-position: 120px 0;
}

.bandera-Mexico {
  background-position: 150px 0;
}

.bandera-Colombia {
  background-position: 180px 0;
}

.bandera-Venezuela {
  background-position: 210px 0;
}

.bandera-España {
  background-position: 240px 0;
}

.bandera-EUA {
  background-position: 270px 0;
}>

Wilson Marino Pablo Mendez

student•

No se ustedes... pero yo no he escuchado de sprite... bueno a indagar sería

Harold David Avila Sabogal

student•

En el curso de animaciones encuentras la respuesta

Andrés Campuzano Garzón

student•

¿Es esto Javascript? o un derivado de Javascript?

Andres Rivera

student•

no, usa lógica de programación.

Gerardo Nava Pereda

student•

Reto:
sprite con 10 banderas
con cada FOR EACH hacer el sprite de cada bandera

Sebastian Marin

student•

a trabajar

$name-pais:peru brasil chile ecuador colombia bolivia Venezuela argentina Uruguay paraguay;
$icon-width: 24px;
$icon-height: 24px;
$icons: url('bandera-paises.png');
$i:0;

.sprite-pais {
   background-image: $icons;
   background-repeat: no-repeat;
   width:  $icon-width;
   height:  $icon-height;
   display: inline-block;
}

@each $sprite-pais in ( $name-pais ) {
  .bandera-#{ $sprite-pais } {
      background-position: ($i) 0;
  }
  $i: $i + $icon-height;
}

.sprite-pais {
  background-image: url('bandera-paises.png');
  background-repeat: no-repeat;
  width: 24px;
  height: 24px;
  display: inline-block;
}
.bandera-peru {
  background-position: 0 0;
}
.bandera-brasil {
  background-position: 24px 0;
}
.bandera-chile {
  background-position: 48px 0;
}
.bandera-ecuador {
  background-position: 72px 0;
}
.bandera-colombia {
  background-position: 96px 0;
}
.bandera-bolivia {
  background-position: 120px 0;
}
.bandera-Venezuela {
  background-position: 144px 0;
}
.bandera-argentina {
  background-position: 168px 0;
}
.bandera-Uruguay {
  background-position: 192px 0;
}
.bandera-paraguay {
  background-position: 216px 0;
}

$flags:
  "mx" -576px -576px,
  "co" -960px -128px,
  "ar" -640px 0,
  "br" -896px -64px,
  "uy" -64px -896px,
  "us" 0 -896px,
  "cl" -768px -128px,
  "jp" -896px -384px,
  "cn" -896px -128px,
  "tr" -576px -832px;

%flag {
  width: 64px;
  height: 64px;
  background: url("../img/flags.png") no-repeat;
}

.flag {
  @extend %flag;
}

@each $name, $position-x, $postion-y in $flags {
  .flag__#{$name} {
    background-position: $position-x $postion-y;
    @extend %flag;
  }
}

&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;es&quot;&gt;
&lt;head&gt;
  &lt;meta charset=&quot;UTF-8&quot;&gt;
  &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
  &lt;link rel=&quot;stylesheet&quot; href=&quot;css/Styles.css&quot;&gt;
  &lt;title&gt;banderas&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;section class=&quot;banderascontainer&quot;&gt;
    &lt;div class=&quot;banderascontainer__item Colombia&quot;&gt;bandera #1&lt;/div&gt;
    &lt;div class=&quot;banderascontainer__item Venezuela&quot;&gt;bandera #2&lt;/div&gt;
    &lt;div class=&quot;banderascontainer__item Ecuador&quot;&gt;bandera #3&lt;/div&gt;
    &lt;div class=&quot;banderascontainer__item Peru&quot;&gt;bandera #4&lt;/div&gt;
    &lt;div class=&quot;banderascontainer__item Brazil&quot;&gt;bandera #5&lt;/div&gt;
    &lt;div class=&quot;banderascontainer__item Chile&quot;&gt;bandera #6&lt;/div&gt;
    &lt;div class=&quot;banderascontainer__item Argentina&quot;&gt;bandera #7&lt;/div&gt;
    &lt;div class=&quot;banderascontainer__item Bolivia&quot;&gt;bandera #8&lt;/div&gt;
    &lt;div class=&quot;banderascontainer__item Cuba&quot;&gt;bandera #9&lt;/div&gt;
    &lt;div class=&quot;banderascontainer__item Uruguay&quot;&gt;bandera #10&lt;/div&gt;
    &lt;div class=&quot;banderascontainer__item Costarica&quot;&gt;bandera #11&lt;/div&gt;
    &lt;div class=&quot;banderascontainer__item El_Salvador&quot;&gt;bandera #12&lt;/div&gt;
  &lt;/section&gt;
&lt;/body&gt;
&lt;/html&gt;

//----------------------------------------------------------------
$paises: (&quot;Colombia&quot;, &quot;Venezuela&quot;, &quot;Ecuador&quot;, &quot;Peru&quot;, &quot;Brazil&quot;, &quot;Chile&quot;, &quot;Argentina&quot;, &quot;Bolivia&quot;, &quot;Cuba&quot;, &quot;Uruguay&quot;, &quot;Costarica&quot;, &quot;El_Salvador&quot;);

@each $pais  in $paises {
  .#{$pais}{
    background-image: url(&quot;/img/Flag_of_&quot;+$pais+&quot;.png&quot;);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
  }
}

//----------------------------------------------------------------
body {
  margin: 0;
  padding:20px;
}

main {
  width: 100vw;
  height: 100vh;
  border: 3px solid blue;
}

.banderascontainer{
  height: 100vh;
  width: 50%;
  display: grid;
  grid-template-columns: repeat(4, minmax(100px, 1fr));
  grid-template-rows: repeat(3,100px);
  gap: 20px;
  &amp;__item{
    width: auto;
    border: 1px solid red;
    justify-content: a
  }
}

.Colombia {
  background-image: url(&quot;/img/Flag_of_Colombia.png&quot;);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.Venezuela {
  background-image: url(&quot;/img/Flag_of_Venezuela.png&quot;);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.Ecuador {
  background-image: url(&quot;/img/Flag_of_Ecuador.png&quot;);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.Peru {
  background-image: url(&quot;/img/Flag_of_Peru.png&quot;);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.Brazil {
  background-image: url(&quot;/img/Flag_of_Brazil.png&quot;);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.Chile {
  background-image: url(&quot;/img/Flag_of_Chile.png&quot;);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.Argentina {
  background-image: url(&quot;/img/Flag_of_Argentina.png&quot;);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.Bolivia {
  background-image: url(&quot;/img/Flag_of_Bolivia.png&quot;);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.Cuba {
  background-image: url(&quot;/img/Flag_of_Cuba.png&quot;);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.Uruguay {
  background-image: url(&quot;/img/Flag_of_Uruguay.png&quot;);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.Costarica {
  background-image: url(&quot;/img/Flag_of_Costarica.png&quot;);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.El_Salvador {
  background-image: url(&quot;/img/Flag_of_El_Salvador.png&quot;);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

body {
  margin: 0;
  padding: 20px;
}

main {
  width: 100vw;
  height: 100vh;
  border: 3px solid blue;
}

.banderascontainer {
  height: 100vh;
  width: 50%;
  display: grid;
  grid-template-columns: repeat(4, minmax(100px, 1fr));
  grid-template-rows: repeat(3, 100px);
  gap: 20px;
}
.banderascontainer__item {
  width: auto;
  border: 1px solid red;
  justify-content: a;
}

.Colombia {
  background-position: 0px, 0;
}

.Korea {
  background-position: 40px, 0;
}

.Japon {
  background-position: 80px, 0;
}

.China {
  background-position: 120px, 0;
}

.Thaiwan {
  background-position: 160px, 0;
}

.US {
  background-position: 200px, 0;
}

<$name-paises: Uruguay, Brasil, Argentina, Chile, Peru, Mexico, Colombia, Venezuela, España, EUA;
$i: 0;
$position: 30px;

@each $paises in $name-paises {
  .bandera-#{$paises} {
    background-position: $i 0;
  }
  $i: $i + $position;
}>

<.bandera-Uruguay {
  background-position: 0 0;
}

.bandera-Brasil {
  background-position: 30px 0;
}

.bandera-Argentina {
  background-position: 60px 0;
}

.bandera-Chile {
  background-position: 90px 0;
}

.bandera-Peru {
  background-position: 120px 0;
}

.bandera-Mexico {
  background-position: 150px 0;
}

.bandera-Colombia {
  background-position: 180px 0;
}

.bandera-Venezuela {
  background-position: 210px 0;
}

.bandera-España {
  background-position: 240px 0;
}

.bandera-EUA {
  background-position: 270px 0;
}>

Ciclos FOR/EACH

Preprocesador Sass

Qué aprenderás sobre Sass

Introducción al Curso de Sass

Diferencias entre Sass, Stylus y Less

Compilación de código en archivos CSS

Instalación

Estructura de CSS

Variables

Variables

Reto

Solución al reto

Anidaciones

Anidaciones

Mixins

Mixins

Continuando con Mixins

Uso de la directiva `content` (`block` en Stylus)

Extend

Funciones

Funciones

Directiva

Ejemplos de funciones

Reto

Reto - Solución

Controles de Flujo

Listas y directiva each

Ciclos FOR/EACH

Condicionales