A煤n no tienes acceso a esta clase

Crea una cuenta y contin煤a viendo este curso

Condicionales y Loops

28/42
Recursos

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.

Aportes 44

Preguntas 4

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

Entendi mejor el each con la documentacion de Sass

https://sass-lang.com/documentation/at-rules/control/each

Veo que la diferencia con less es casi imperceptible. Sass a mi apresiaci贸n es m谩s completo.

Peque帽a duda:
Si nos fijamos antes de declarar el loop 鈥渆ach鈥. Los h1,h2 y h3. Ya estaban recibiendo par谩metros de Font-size que nosotros mismos se lo metimos. Ejemplo:

	&__titulo {
		text-transform: uppercase;
		text-align: center;
		font-weight: 700;
		font-size: 12px;
		color: get-opacity($color-claro, .50);
	}

Cuando creamos el loop:

@each $header, $size in (h1: 30px, h2: 25px,h3: 20px) {
	#{$header}{
		font-size: $size;
		margin: 0;
	}
}

Realmente estamos intentando sobreescribir esos Font-size para que coja los que estamos declarando en el loop. Cosa que NO ocurre ya que primar los que se declararon anteriormente:

Entonces entiendo que podemos hacer alguna de estas 2 cosas.
1.- Borrar la variable de $size del loop y asi tomar el font-size que declaramos en cada uno de los h1,h2,h3鈥
o
2.- Borrar los font-size que declaramos en cada h1, h2 o h3 para que coja el font-size que le enviamos desde el loop con la variable $size.

驴Qu茅 ser铆a lo recomendable?

Saludos!!

驴No ser铆a m谩s f谩cil crear un condicional que diga que si la fuente es $Fuente2, que imprima text-transform: uppercase?

Acerca del Loop, la variable creada $header representa a los 鈥榟鈥 (h1, h2, h3) y la variable creada $size representa a sus valores de los 鈥榟鈥(30px, 25px, 20px). Luego se invoca a la variable $header como una funci贸n, que dice que a cada 鈥榟鈥 del header dependiedo si es h1, h2 o h3 se le cambiara el font-size a su valor respectivo, si el $header es un h1 se le pondr谩 30px y as铆 respectivamente y a cada 鈥榟鈥 del $header se le quita el margin. En s铆 le puedes poner cualquier nombre a la variable $header y a la variable $size y igual funcionar谩 es solo para representar los 鈥榟鈥 y sus valores (30px). Tambi茅n en el ejemplo del profe el loop no sobreescribe el font-size en los 鈥榟鈥 ya que previamente se les declar贸 ya un font-size, en vez de eliminar uno por uno yo solo le puse !important al loop y se solucion贸.

Leyendo la documentaci贸n de Sass lo que hacen los loops es crear bloques de c贸digo que var铆an muy poco entre cada uno.
Por ejemplo:

$sizes: 40px, 50px, 80px;

@each $size in $sizes {
  .icon-#{$size} {
    font-size: $size;
    height: $size;
    width: $size;
  }
}

El c贸digo que crea en CSS es :

.icon-40px {
  font-size: 40px;
  height: 40px;
  width: 40px;
}

.icon-50px {
  font-size: 50px;
  height: 50px;
  width: 50px;
}

.icon-80px {
  font-size: 80px;
  height: 80px;
  width: 80px;
}

En este caso crea 3 clases diferentes que tienen las mismas propiedades pero con diferentes valores, ahorr谩ndonos muchas lineas de c贸digo en nuestro c贸digo.
Esto se puede adaptar a muchas otras cosas, seg煤n nuestras necesidades.

Sass admite cuatro reglas de control de flujo:

  • @if and @else: Controla si se eval煤a o no un bloque

  • @each: eval煤a un bloque para cada elemento de la lista o par en un mapa.

  • @for: eval煤a un bloque cierto numero de veces

  • @while: eval煤a un bloque hasta que se cumpla cierta condici贸n.

Link: https://sass-lang.com/documentation/at-rules/control

Ni siquiera hay un h1 y ah铆 andamos

En esta clase se resuleve el problema de quitar los margenes que vienen por defecto en los titulos. Usamos el loop para poner el ejemplo, pero la mejor manera de hacer eso seria asi:

h1, h2, h3, h4, h5{
  margin: 0;
}

驴Qu茅 hace un if?

Nos permite tomar una decisi贸n basado en la informaci贸n que recibe y la condicion que definamos.
En este caso, if nos servir谩 para que se cambie por fuente 1, o fuente 2 y uppercase en vez de escribir modulo por m贸dulo estas lineas.
Con solo crear este mixin + if ahorraremos muchas lineas de c贸digo.

  • 驴Cual es la condici贸n?
    si es fuente 1, aplicar valores fuente 1, si no, entonces
    ser谩 fuente 2 y se aplicar谩n fuente2 y el text-transform: uppercase;

@mixin titulos ($fuente){
    @if $fuente == $Fuente1 {
        font-family: $Fuente1;
    }@else {
        font-family: $Fuente2;
        text-transform: uppercase;
    }
}

驴C贸mo se implementa ?

Ve a la parte que quieres simplificar, d贸nde se agreg贸 fuente1 y fuente 2, retira valores previos y agrega la siguiente linea:

hacemos uso del @include:

@include titulos($fuente1);

o

@include titulos($fuente2);

Para que el area de perfil y area de articulo ocupen la misma cantidad de espacio en la pantalla pueden usar la propiedad vw

.perfil {
  width: 50vw;
  ...
}

.articulos {
  width: 50vw;
  ...
}

Buenas gente! 馃槃
No entiendo la l贸gica: el nombre representativo de variable es header y size. dentro del IN le agrega valores a h1,2 y 3鈥 esos valores los representa header? se guardan en header? o
header representa h1,2 y 3
size representa 30,25,20px?

Dentro de #{header} valida que se cumpla/recorra 3 veces los valores dentro de IN
y esas 3 vueltas me va llenando font-size con los $size???

y yo que cre铆a que ya sabia usar sass ufff despues de estos v铆deos me doy cuenta que no sabia nada 馃槀

NOTA:
Tengan en cuenta cuando declaren el loop ir a quitarle en fon-size a cada parte del c贸digo para que no sobre escriban las propiedades que declararon en el loop

Genial, son peque帽os los detalles a mi parecer a comparaci贸n con less pero se ve mas util

estupendo, muyyy buena clase carajo 馃槃

En el archivo de ubicaciones, tambi茅n hay h2 y h3. En ese archivo tambi茅n aplica el

@include titulos($Fuente2)

Fin de creaci贸n del condicional dentro de un mixin #06:48

Creando condicionales: 04:24

  • 驴Qu茅 es un each?

Es un ciclo o loop que creamos para replicar autom谩ticamente uno o varios valores previamente definidos a uno o varios elementos simultaneamente.

  • 驴Qu茅 ventajas tiene?

Solo lo defines y se aplica desde el archivo global autom谩ticamente a todos los m贸dulos.

  • 驴C贸mo se construye?

El each requiere dos variables, la primera indicar谩 que vas a cambiar y la segunda lo que vas a cambiar. Definido esto dentro de los ( ) agregamos lo que vamos a cambiar en ubicaci贸n, es decir el elemento y luego agregamos despues de : el atributo que deseemos.
abrimos { } y dentro de estos ingresamos lo siguiente:

#{$variable que indica que cambiaremos} {
	elAtributo que cambiaremo: y que le aplicaremos;
	tamb铆en si queremos agregar algo m谩s;
	}
}

y queda de la siguiente forma:


@each $header, $size in (h1: 30px, h2: 25px, h3: 20px){
    #{$header} {
        font-size: $size;
        margin: 0;
    }
}

loop finalizado

creando loop

La forma en que el profesor representa el @each es buena pero yo le voy a agregar un plus peque帽o para hacer que el c贸digo sea a煤n m谩s legible y mantenible:

La forma en que el profesor expresa el Loop muestra c贸mo se indican los par谩metros dentro de los par茅ntesis dentro de la funci贸n directamente.

@each $header, $size in (h1: 30px, h2: 25px, h3: 20px) {
    #{$header} {
        margin: 0;
        font-size: $size;
    }
}

Pero debemos saber que tambi茅n podemos encapsular dichos par谩metros directamente y luego enviarlos como una variable 鈥極bjeto鈥 al Loop. Con esto nos permitimos entender de forma organizada el c贸digo, mantener a largo plazo dicho bloque Loop y de esta manera nos estamos asegurando de estar manejando buenas practicas al segmentar el c贸digo como debe de ser.

$sizes: (h1: 30px, h2: 25px, h3: 20px);

@each $header, $size in $sizes {
    #{$header} {
        margin: 0;
        font-size: $size;
    }
}

Al utilizar el @each no tomo ninguno de los valores que le pasamos. 馃馃え

no entendi el Loop each

@each $header, $size in (h1:30px, h2:25px, h3:20px){{

#{$header} <----- por que se llama el Header en esta parte{

font-size:$size;
margin:0;
}
}

Sintaxis de condicionales y loops en Sass

.
Para usar condicionales, usamos la misma sintaxis de siempre, pero con un signo arroba antes. Veamos un ejemplo

@if $fuente==$fuente-principal{
  font-family: $fuente-principal;
} @else{
  font-family: $fuente;
  text-transform: uppercase;
}

.
En el caso de los loops, estos son distintos a los vistos en Less, ya que podemos pasarle ciertos parametros al loop, pero hay que especiicarlos. Veamos un ejemplo:

@each $elemento, $color in (button: red, h1: blue){
  #{elemento}{
    color: #{color}
  }
}

Esto definitivamente se pudo haber hecho y explicado bastante mejor鈥 https://sass-lang.com/documentation/at-rules/control/each
para los que quieran entender un poco mejor el each

Podemos crear al parecido a los Objetos de Javascript, en Sass se les llama listas, estas listas las podemos usar para iterar los valores con el @each

$heading: (
  h1: 30px,
  h2: 25px,
  h3: 20px
);

@each $header, $size in $heading {
  #{$header} {
    font-size: $size;
    margin: 0;
  }
}

En videos anteriores el profesor dice que la diferencia entre un mixin y una funci贸n, es que a la funci贸n le podemos pasar par谩metros; pero en esta lecci贸n vimos que a los mixins tambi茅n se les puede pasar par谩metros. En este orden de ideas, cual es la diferencia?

!

Buenos ejemplos para explicar este tema! 馃槃

Cu谩ndo hacemos el loop con los tama帽os de los 鈥渉1, h2, h3鈥 , para que esto funcione es necesario declarar los Hs en css o de una los ejecuta porque ya est谩n en html?

Que clase tan excelente, gracias.

Creo que se te olvido mencionar que en el each usas un mapa donde a h1 le corresponde un tama帽o de 30px
h2: 25px y as铆鈥

tambi茅n se puede hacer con un arreglo normal en lugar de un mapa

(min 3:40) A diferencia de los mixins y de las funciones, a los loops no es necesario mandarlos a llamar. Autom谩ticamente se ejecutan.

Hasta ahora se me hace mucho mejor trabajar con Sass

buena opci贸n para re utilizar c贸digo los condicionales y loops, supongo que si es un proyecto grande te ahorran mucho tiempo.

En tiempos de coronavirus, aprender es lo mejor 馃槂

Buena herramienta

Gran clase

Sass de mi coraz贸n 馃挌

ERROR EN EL C脫DIGO

Para explicar la funci贸n each, se coloc贸 tama帽o a la fuentes para los h1,h2 y h3. (creo q

@each $header, $size in (h1, h2, h3) {
	#{$header} {
		margin: 0;
	}
}```
ue no hay h1 en el proyecto xD)

Pero esos tama帽os declarados en el each son sobrescritos por los que declaramos por clases. Quiz谩s en pr贸ximas clases vean la necesidad de cambiar los valores de los tama帽os pero en esta clase no se ha ejecutado as铆.

No obstante, lo que si aporta el each (en este caso) es el margin 0; asque de momento, yo sugerir铆a dejar el loop con solo una condicional asi: