Uso de selectores, scope de las variables y shadowing

Curso de Fundamentos de Sass: Crea tu Primera Landing Page

Conociendo SASS

¿Qué es SASS y en qué se diferencia de otros preprocesadores?

¿Cómo funcionan los preprocesadores? Ventajas de utilizar uno

Instalación y configuración del entorno de trabajo

Anatomía de un proyecto de SASS e instalación y configuración del entorno de trabajo

Reglas y uso

Estructura de la hoja de estilos y variables

Uso de selectores, scope de las variables y shadowing

Creando la estructura del proyecto

At Rules: CSS y nesting

Quiz: Reglas y uso

Expresiones

Expresiones: Literales y Operaciones

Quiz: Expresiones

Proyecto: sección main

Creando la estructura de la sección main

Quiz: Proyecto: sección main

Herencia en SASS

¿Qué es la herencia y cómo funciona en SASS?

Creando la estructura de la sección de Cuidado de la Salud y Decoración del Hogar

Usando flexbox en la sección de Cuidado de la Salud y Decoración del Hogar

Quiz: Herencia en SASS

Mixins

¿Qué es un mixin en CSS?

Implementando mixins en el proyecto

Quiz: Mixins

Funciones

Creación de nuestras propias funciones

Proyecto

Creando la estructura de la sección '¿Por qué nosotros?'

Creando la estructura de la sección Galería de Estilos

Creando la estructura de la sección Mapa y Footer

Quiz: Proyecto

Deploy

Presentación de Github pages y deploy

Quiz: Deploy

Extras

Aprende a instalar y configurar Sass mediante Node.js

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Si ya tienes una cuenta,

Recursos

Aportes 17

Preguntas 3

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Andrea Chávez

hace 2 años

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.

Raymondi Alejandro Ramos Vásquez

hace 2 años

🎉 Scope en sass → contexto de creación y alcance de las variables

Miguel de la Cruz

hace un año

Selectores:

Un selector CSS determina los elementos a los que se aplicarán reglas CSS.
Tipos de selectores:
- Clase
- Id
- Tipo
- Atributo

Scope:

El scope en Sass se refiere al contexto en el que se declaran las variables y dónde se pueden utilizar.

Variables locales:

Las variables locales están declaradas dentro de un bloque { }.
Cualquier selector anidado puede acceder a las variables locales declaradas dentro del selector.

Variables globales:

De forma predeterminada, las variables declaradas fuera de un selector son globales.
Esto permite el acceso a estas variables en cualquier parte de la hoja de estilos.

Shadowing:

Shadowing implica que tanto las variables locales como globales pueden tener nombres idénticos, pero existen en niveles de ámbito diferentes.
Esto evita modificaciones accidentales en las variables globales al utilizar el mismo nombre en variables locales.

Flag !global:

Se utiliza la flag !global cuando se desea cambiar el valor de una variable global dentro del ámbito de una variable local.

GERMAN GARCIA

hace 2 años

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 😛

lo unico que he encontrado es esto:

Pablo Alejandro Figueroa

hace 8 meses

global y local

Captura de pantalla 2024-04-10 174006.png

usando !global

Captura de pantalla 2024-04-10 173841.png

peeero…

Captura de pantalla 2024-04-10 175620.png

Jose Luis Bedoya

hace un año

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!

Jean Carlos Rodríguez

hace un año

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

Jean Carlos Rodríguez

hace un año

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>

Alvaro O.

hace un año

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.

Diego Andres Lopez Rodriguez

hace 8 días

Primera vista de mi proyecto en Sass ![](https://static.platzi.com/media/user_upload/image-aead063c-5ae6-44e4-96da-0db8a38e0502.jpg)

Euclides Marin

hace 25 días

Recomiendo que conforme vayan viendo el curso lean la documentacion oficial de SASS. [Sass: Syntactically Awesome Style Sheets](https://sass-lang.com/)

Antonio Beltrán

hace 2 meses

Se me abría la consola cada vez que guardaba un cambio, aquí encontré la solución: 1. Abre la configuración de Visual Studio Code presionando `Ctrl + ,` o haciendo clic en el ícono de engranaje en la parte inferior izquierda y seleccionando "Settings". 2. En la barra de búsqueda de configuración, escribe `live sass`. 3. Busca la opción llamada **Live Sass Compiler: Show Output Window**. 4. Desmarca esta opción para que la consola no se abra automáticamente cada vez que se guarden cambios.

Pablo Alejandro Figueroa

hace 8 meses

Genial…:!

Pablo Alejandro Figueroa

hace 8 meses

Sin @media

usando: cqw

Captura de pantalla 2024-04-11 020402.png

Pablo Alejandro Figueroa

hace 8 meses

Captura de pantalla 2024-04-10 231114.png

Pablo Alejandro Figueroa

hace 8 meses

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.

Marco Andrey Romero Acosta

hace un año

Scope de las variables y shadowing

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:

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 modifiquen 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.