Selectores y scope de variables en Sass
Contenido del curso
Andrea Chávez
----- ----
Sandra Fiallos Ruiz(Sandre)
Sandra Fiallos Ruiz(Sandre)
Juan Manuel Rubio Gallego
iecgerman .
Hector Manuel López Gómez
iecgerman .
Pablo Alejandro Figueroa
Ricardo Cuauro
Sergio Duvand Silva Merchán
Jose Luis Bedoya
Jean Carlos Rodríguez
Carlos Andres Cardona
Any Omaña
Jean Carlos Rodríguez
Juan Diaz
Jean Carlos Rodríguez
Jean Carlos Rodríguez
Alvaro Orozco Zapata
Kenneth Angulo L
Neil Ruiz
Diego Andrés Lopez Rodriguez
Euclides Marin
Antonio Beltrán
Pablo Alejandro Figueroa
Pablo Alejandro Figueroa
Pablo Alejandro Figueroa
Pablo Alejandro Figueroa
Mi resumen: El scope dentro de Sass hace referencia al contexto en el que son declaradas las variables y donde es posible hacer uso de las mismas, hay dos tipos de variables: Locales: • Declaradas dentro de un bloque { } • Cualquier selector anidado puede acceder a las variables locales declaradas dentro del selector Globales: • Todas las variables declaradas fuera de un selector son globales, esto significa que se puede acceder a ellas en cualquier parte de nuestra hoja de estilos.
Shadowing: Las variables locales y globales pueden tener el mismo nombre ya que se encuentran en diferentes niveles del scope para evitar que se modificquen por error las variables globales.
!global flag: Se usa en caso de querer modificar el valor global de una variable dentro del scope de una variable local.
🎉 Scope en sass → contexto de creación y alcance de las variables
Por alguna razón cuando corro el 'live server' no me aparecen los cambios que realizo en el archivo main.scss, más bien solo toma la hoja de estilo de main.css :s
¿Alguien sabe la razón, chicxs?
Ya encontré la solución, tengo que correr SASS, presionar Watch SASS
Genial, que encontraste la solución tenia el mismo inconveniente.
El figma te dice el ancho o alto de cada cosa que diseñes, la profe esta como adivinando que height usar, es lo bonito del figma, sketch, Adobe XD, etc. que te van diciendo que tamaño de pixeles usar para que te quede igual que el prototipo.
alguién tiene la liga del figma??? o la profe no la quiere pasar :P
lo unico que he encontrado es esto:
te refieres a esto?
Figma?type=design&node-id=0-1)
@fomoalfa kmuchas gracias, lo pone más adelante en un video, es que es importante para así poder sacar los svg, o las imagenes, o los copys y no poner solo lorem impsum, etc.
global y local
usando !global
peeero....
¿Alguien más se siente perdido hasta este punto o soy solo yo? No entiendo por qué en vez de declarar todos los colores como variables tiene que declarar una variable local en el footer para luego aplicar un color de fondo... Tampoco sé porqué no agrega el color de fondo general al body directamente si toda la página tiene el mismo color.... AIURAAAA!!!
Si no estoy mal en el footer coloca la variable local pq ese color naranja solo se utiliza en el footer y el boton, entonces no es necesario ocupar espacio en memoria con una variable que se utiliza poco, eso es lo que he entendido hasta el momento. Y la parte de pq le coloca el background a cada elemento en vez de al body, tampoco la entiende parcero. 🤘
no es necesario agregarle la clase navbar a una etiqueta del tipo nav! Si sabes que solo vas a tener uno solo de ese tipo, puedes darle estilos a nav!
El parametro de la variable $background dentro de:
<.footer{ background: #FA9500; background-color: $background ; width: 100%; height: 250px; }>
no me funciona mi vs code no encuentra ese parámetro y no me acuerdo en ninguna clase que la profe haya instalado tal cosa.
Aquí hay algunas posibles explicaciones y soluciones:
1- Falta de declaración de la variable: Es posible que el parámetro de variable $background no haya sido declarado en ningún lugar de tu código antes de su uso. Debes asegurarte de que la variable $background esté declarada y definida en algún archivo Sass o SCSS antes de ser utilizada en tu archivo CSS. La declaración se ve así: $background: #valor;.
2- Extensión de VS Code para Sass/SCSS: Si estás trabajando con Sass o SCSS en tu proyecto, es posible que necesites instalar una extensión de VS Code específica para estas tecnologías. Esto ayudará a VS Code a reconocer y resaltar correctamente las variables y sintaxis de Sass/SCSS en tu código.
3- Errores de sintaxis: Asegúrate de que la sintaxis de tu código sea correcta. El código que proporcionaste parece tener un error en la etiqueta <.footer, que debería ser solo .footer en CSS.
4- Ruta del archivo incorrecta: Verifica que estás trabajando en el archivo correcto y que este archivo está incluido en tu proyecto de VS Code.
Si ninguna de estas soluciones resuelve el problema, sería útil proporcionar más detalles sobre tu proyecto y la estructura de archivos para que pueda brindarte una ayuda más específica.
Te faltó la { cuando declaraste la variable
codigo .scss de la clase
$primary-color:#FFEFE7; $secundary-color:#FFDAC6; $tertiary-color:#BABD8D; $primary-text-color:#7C6A0A; $font-stackl: 'IBM Plex Sans' , sans-serif; body{ margin: 0; padding: 0; } .navbar{ background-color: $primary-color; } nav{ width: 100%; height:100px; } main{ background-color: $primary-text-color; } .footer{ background: #FA9500; background-color: $background ; width: 100%; height: 250px; }
te falto el "$" en $background: #FA9500;
bro muchas gracias tu sabes el dolor de cabeza que me ha dado encontrar ese error
codigo HTML de la clase
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="/sass/main.css"> <link rel=“preconnect” href=“https://fonts.googleapis.com”> <link rel=“preconnect” href=“https://fonts.gstatic.com” crossorigin> <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;700&display=swap" rel="stylesheet"> <title>Document</title> </head> <body> <nav class="navbar"></nav> <main class="main-section"></main> <footer class="footer"></footer> </body> </html>
Por buenas practicas pueden agregar el selector de html y dentro de este usar el font-size de 62.5% para el tema del rem.
html{
font-size: 62.5%;
]
pudiendo omitir pixeles y dando adaptabilidad.
🟢 Selector de clase
<p class="texto">Hola</p>
.texto {
color: blue;
}
🟢 Selector de ID
<p id="titulo">Hola</p>
#titulo {
color: red;
}
🟢 Selector de tipo
<p>Hola</p>
<p>Adiós</p>
p {
color: green;
}
🟢 Selector de atributo
<input type="text">
<input type="email">
input[type="email"] {
border: 2px solid blue;
}
Extraña forma de implementar un proyecto que tiene un diseño en Figma, con especificaciones muy claras para los estilos. Los 135px de altura definidos para el header en la versión desktop, o los 32px de la versión mobile, no se tuvieron en cuenta.
Primera vista de mi proyecto en Sass
Recomiendo que conforme vayan viendo el curso lean la documentacion oficial de SASS.
Sass: Syntactically Awesome Style Sheets
Se me abría la consola cada vez que guardaba un cambio, aquí encontré la solución:
Ctrl + , o haciendo clic en el ícono de engranaje en la parte inferior izquierda y seleccionando "Settings".live sass.Genial..:!
Sin @media
usando: cqw
Tip: Global variables should be defined outside any rules. It could be wise to define all global variables in its own file, named "_globals.scss", and include the file with the @include keyword.