Listas y directiva each

Clase 19 de 21 • Curso de Sass 2018

Resumen

De ahora en adelante veremos varias directivas de control de flujo dentro de Sass. Por eso en esta clase vamos a hablar sobre cómo usar la directiva each y cómo manejar listas dentro de Sass.

Fabricio Micheli

student•

Coloco aquí un ejemplo de directiva @each para crear clases para avatars con fotos de actores…

$actores: Juan Pedro Mariel Alejo Jose;

@each $actor in $actores {
  .#{$actor}-foto{
    background: image-url("images/foto-#{$actor}.jpg") no-repeat;
  }
}

La salida en CSS sería la siguiente…

.Juan-foto {
  background: image-url("images/foto-Juan.jpg") no-repeat;
}

.Pedro-foto {
  background: image-url("images/foto-Pedro.jpg") no-repeat;
}

.Mariel-foto {
  background: image-url("images/foto-Mariel.jpg") no-repeat;
}

.Alejo-foto {
  background: image-url("images/foto-Alejo.jpg") no-repeat;
}

.Jose-foto {
  background: image-url("images/foto-Jose.jpg") no-repeat;
}

Cristhian Daza

student•

Muy bueno.

Wilson Marino Pablo Mendez

student•

interesante!

Juan Castro

teacher•

Awesome!

Sergio Toshio Minei

student•

each

$font-weights: normal bold italic;

@each $font in ($font-weights) {
  .#{$font} {font.weight: $font;}
}

y esto da como resultado:

.normal {
  font-weight: normal;
}

.bold {
  font-weight: bold;
}

.italic {
  font-weight: italic;
}

Pueden ver el resumen completo del curso aquí

Gerardo Nava Pereda

student•

$font-weights: normal bold italic;

@each $font in ($font-weights) {
  .#{$font} {font-weight: $font;}
}

Harold David Avila Sabogal

student•

Muchas gracias por el resumen

Emanuel Torres Clemente

student•

Yo aplique algo parecido pero para tipos de fuentes me parece tener buen uso en algun caso.

$font-family: Arial Verdana Impact;

@each $font in ($font-family){
  .#{$font} {font-family: $font;}
}

Platzi Team

student•

Bueno aporte compañero, Excelente aplicación

Angelo Segura

student•

Ahora si voy a sentirme más programador cuando establezca estilos 😎

Harold David Avila Sabogal

student•

Seguramente

Omar Villafuerte

student•

sin dudas

Mauro Quinteros

student•

Probando el uso de las listas me di cuenta que también es posible declararlos con comas por si se les hace más fácil

$font-family: Arial, Helvetica, sans-serif;

Guillermo Baldán López

student•

¿Alguién ha usado preprocesadores en animaciones css?

Luis Efraín Sánchez Ávila

student•

Funciona exactamente igual

Luis Jhohan Venegas Tobar

student•

funciona exactamente igual es que mantengas la animación con las propiedades de css puedes ver mas info en

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations

Baltazar Ortega

student•

¿Para que sirve la variable $font en el ejercicio? No aparece en el CSS

Diego Forero

Team Platzi•

La variable $font se usa para tomar cada uno de los valores que estén en el listado, es similar a los ciclos for en python. Al momento de compilar al css la variable $font es reemplazada por cada uno de los valores de la lista y por eso se obtienen 3 clases. https://platzi.com/clases/sass/concepto/controles-de-flujo/listas-y-directiva-each/material/?time=205

Harold David Avila Sabogal

student•

font es una variable temporal dentro del ciclo each

Eduardo Reyes

student•

Hace poco vi un ejercicio de each una asignación e estilos base a los H. De esta manera.

$header-sizes: (
  h1: 28,
  h2: 24,
  h3: 20,
  h4: 18,
  h5: 16,
  h6: 16,
);

@each $header, $size in $header-sizes {
  .#{$header} {
    font-size: #{$size}px;
    font-weight: bold;
    line-height: $size * 1.2;
  }
}

QUe nos da como resultado

.h1 {
  font-size: 28px;
  font-weight: bold;
  line-height: 33.6;
}

.h2 {
  font-size: 24px;
  font-weight: bold;
  line-height: 28.8;
}

.h3 {
  font-size: 20px;
  font-weight: bold;
  line-height: 24;
}

.h4 {
  font-size: 18px;
  font-weight: bold;
  line-height: 21.6;
}

.h5 {
  font-size: 16px;
  font-weight: bold;
  line-height: 19.2;
}

.h6 {
  font-size: 16px;
  font-weight: bold;
  line-height: 19.2;
}

Billi Ramirez

student•

@each $font in(normal, bold, italic) {
	.#{$font} {font-weight: $font;}
}

Billi Ramirez

student•

$font-weights: normal bold italic;

@each $font in ($font-weights) {
.#{$font} {font-weight: $font;}
}

Harold David Avila Sabogal

student•

Gracias

Guido Rearte

student•

Interesante!

Harold David Avila Sabogal

student•

Buena clase

Sebastian Marin

student•

Listas,,,,,, super..... ahorran mucho trabajo

Be Yourself♥

student•

@each :)

Johan Villanueva

student•

[SASS] Listas @each

juan camilo castillo saucedo

student•

Ejemplo creando varias clases apartir de una lista de colores

$black: black
$white: white

$green: green

$general: ('black', $black), ('white', $white), ('green', $green);

@each $color in $general
    // seleccionar cada valor
    $name: nth($color, 1)
    $value: nth($color, 2)

    .hw-bg-#{$name}
        background-color: $value
    .hw-color-#{$name}
        color: $value
        td
            color: $value
    .hw-color-#{$name}-hover
        &:hover,
        &.hw-active
            color: $value
    .hw-color-#{$name}-active
        color: $value
        font-weight: bold
    .hw-border-#{$name}
        border-color: $value

Andrés Campuzano Garzón

student•

Fadith Enrique Escorcia Mujica

student•

Como se llama ese tema para el editor?

Andrés Campuzano Garzón

student•

https://carbon.now.sh/

Beto Toro

student•

En este caso, cuál sería la diferencia de utilizar una lista a un Array?

Enrique Devars

teacher•

¡Hola! :D

Te dejo este link donde se explica mejor tu duda: https://www.sitepoint.com/sass-maps-vs-nested-lists/

Nunca pares de aprender 💚

Beto Toro

student•

Muchas gracias 🙏🏼

Hernán Arica

student•

hubiera sido bueno armar un proyecto con Sass... abría sido muy buen curso con ese complemento

Jorge Humberto Nemogá Pinzón

student•

Es cierto. Pero si de casualidad vez primero el Curso de Preprocesadores de CSS entonces la verdad que estos habrían sido realmente unos cursos largos y aburridos.

Mirate ese curso tiene los tres de Sass, Less y Stylus además de un proyecto usando un preprocesador de Html (Pug).

Al final, se supone que si buscas conocer un preprocesador ya sabes css base y html base, solo quieres saber como te ahorra tiempo, creo que ahí es donde sirven estos ligeros cursos.

Joel Bello

student•

@jhnemogap Como sabrás hay diferente tipos de estudiantes y de aprendizaje, lo más lógico sería que todos los cursos trataran de incluir todos los tipos de aprendizaje. Tanto tú como yo sabemos que este curso podría ser mejor. Tipos de Estudiantes

Jhonatan David Ibarra Lavado

student•

estupendo :D

Carlos Alberto Conde Moreno

student•

.Juan-foto {
  background: image-url("images/foto-Juan.jpg") no-repeat;
}

.Pedro-foto {
  background: image-url("images/foto-Pedro.jpg") no-repeat;
}

.Mariel-foto {
  background: image-url("images/foto-Mariel.jpg") no-repeat;
}

.Alejo-foto {
  background: image-url("images/foto-Alejo.jpg") no-repeat;
}

.Jose-foto {
  background: image-url("images/foto-Jose.jpg") no-repeat;
}

$header-sizes: (
  h1: 28,
  h2: 24,
  h3: 20,
  h4: 18,
  h5: 16,
  h6: 16,
);

@each $header, $size in $header-sizes {
  .#{$header} {
    font-size: #{$size}px;
    font-weight: bold;
    line-height: $size * 1.2;
  }
}

.h1 {
  font-size: 28px;
  font-weight: bold;
  line-height: 33.6;
}

.h2 {
  font-size: 24px;
  font-weight: bold;
  line-height: 28.8;
}

.h3 {
  font-size: 20px;
  font-weight: bold;
  line-height: 24;
}

.h4 {
  font-size: 18px;
  font-weight: bold;
  line-height: 21.6;
}

.h5 {
  font-size: 16px;
  font-weight: bold;
  line-height: 19.2;
}

.h6 {
  font-size: 16px;
  font-weight: bold;
  line-height: 19.2;
}

$black: black
$white: white

$green: green

$general: ('black', $black), ('white', $white), ('green', $green);

@each $color in $general
    // seleccionar cada valor
    $name: nth($color, 1)
    $value: nth($color, 2)

    .hw-bg-#{$name}
        background-color: $value
    .hw-color-#{$name}
        color: $value
        td
            color: $value
    .hw-color-#{$name}-hover
        &:hover,
        &.hw-active
            color: $value
    .hw-color-#{$name}-active
        color: $value
        font-weight: bold
    .hw-border-#{$name}
        border-color: $value

Listas y directiva 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