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.

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;
}

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