No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Uso de selectores, scope de las variables y shadowing

5/20
Recursos

Aportes 14

Preguntas 3

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

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

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:

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

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

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=鈥減reconnect鈥 href=鈥渉ttps://fonts.googleapis.com鈥>
    <link rel=鈥減reconnect鈥 href=鈥渉ttps://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.

Genial鈥:!

Sin @media

usando: cqw

global y local

usando !global

peeero鈥

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.

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.