Condicionales y Loops
Clase 28 de 42 • Curso de Preprocesadores CSS
Contenido del curso
Cristian Bonomo
student•
hace 6 años
Abdiel Ortega
student•
hace 6 años
Jesus David Duarte
student•
hace 6 años
Clase 28 de 42 • Curso de Preprocesadores CSS
Contenido del curso
Cristian Bonomo
Abdiel Ortega
Jesus David Duarte
marco antonio cespedes mamani
José de Jesús Uscanga Molina
Addi Alberto Salazar Espinosa
Cristian Córdova
Beatriz Pérez Santana
Julian Labrador
Almudena Pardo Alvarez
Germán González
Addi Alberto Salazar Espinosa
Gabriel Gomez
Jorge Eduardo González Campos
John Edward León Muñoz
Gonzalo Pimentel
Juan Cruz Rivera
Addi Alberto Salazar Espinosa
Leonardo Rincon
Xavier Alberto Garcia Navarro
Irving Juárez
Andres Velasquez
Enrique Orozco Gaytán
Luis Márquez
Gerardo Garduño Rosas
Antonio Rafael González Ferrer
Raúl Adolfo Sánchez Rodríguez
Rubén Padilla
Andres Velasquez
Cristian Daniel Jesus Rios
José Ángel Martinez Frias
bruno guerra solano
Platzi Team
Jhonatan David Ibarra Lavado
Entendi mejor el each con la documentacion de Sass
Te lo agradezco
gracias me ayudo a entender mucho mejor este modulo
Veo que la diferencia con less es casi imperceptible. Sass a mi apresiación es más completo.
Es el más usado por la comunidad.
De acuerdo contigo! :D
Pequeña duda: Si nos fijamos antes de declarar el loop "each". 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!!
Tengo la misma duda!! 😅
lo correcto creo yo seria borrar los font-size que declaraste en la etiqueta, pues lo que se busca en el preprocesador es facilitar el cambio de esos valores solo modificando el mixin, pues al cambiar estos vlores se modificarian automaticamente todos los estilos a los que les incluiste el mixin.
¿No sería más fácil crear un condicional que diga que si la fuente es $Fuente2, que imprima text-transform: uppercase?
Eso dije yo
Buen aporte! :D
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.
Es una aplicación diferente, el profesor en este caso utiliza un diccionario, no un array.
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.
Acerca del Loop, la variable creada $header representa a los 'h' (h1, h2, h3) y la variable creada $size representa a sus valores de los 'h'(30px, 25px, 20px). Luego se invoca a la variable $header como una función, que dice que a cada 'h' 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 'h' 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 'h' y sus valores (30px). También en el ejemplo del profe el loop no sobreescribe el font-size en los 'h' 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ó.
Un oso polar nooooOooooooOOOO
jajajajaja esto no le gusta a los osos polares :(
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
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.
@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);
En el archivo de ubicaciones, también hay h2 y h3. En ese archivo también aplica el
@include titulos($Fuente2)
Por qué se creo un mixin para titulos y no una función? cuando usar mixins y cuando functions?
No pude correr el mixin con if
@mixin titulos ($fuente) { @if $fuente == $fuente1 { font-family: $fuente1; } @else { font-family: $fuentes2; text-transform: uppercase; } }
¿ quizás es porque en el else estás escribiendo $fuentes2 con "s" ?
CONDICIONALES con SASS
Fuente: Doc Sass
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; ... }
Gracias!!
Buenas gente! :D 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???
por lo que yo entendí es lo siguiente:
1.- A como mencionas tu en tus primeras 4 lineas, header y size son los nombres de las variables.
2.- h1.2.3 se guardan en la variable header y 30,25,20px se guardan en la variable size, estos son parámetros que se les están asignando a las variables.
3.- en donde se evalúa: #{header] se va rrecorriendo y se le va asignando el font-size, que en este caso a font-size se le esta asignando la variable $size. esto hasta pasar en las 3 posiciones que se asignaron en los parámetros.
básicamente si es a como tu mencionaste.
y yo que creía que ya sabia usar sass ufff despues de estos vídeos me doy cuenta que no sabia nada 😂
Genial, son pequeños los detalles a mi parecer a comparación con less pero se ve mas util
estupendo, muyyy buena clase carajo :D