Si trabajas con hojas de estilos extensas en Sass, las @rules y el nesting son dos herramientas que te ayudan a modularizar y simplificar tu código sin perder compatibilidad con CSS. Aquí aprenderás qué hace cada regla, cómo anidar selectores y cómo aplicar ambos conceptos al estilizar una navbar real.

Qué son las @rules en Sass y para qué sirven

Una @rule es una declaración que cumple funciones específicas dentro de CSS, se inicializa con el símbolo @ y tiene una sintaxis propia. En Sass, estas reglas mantienen compatibilidad con versiones futuras de CSS y te permiten organizar tu código en módulos reutilizables [0:18].

¿Cuál es la diferencia entre @use y @import en Sass? @use carga módulos, estilos y funciones de otra hoja de forma encapsulada, mientras que @import los expone de forma global. @use es la opción recomendada por Sass moderno.

Qué reglas existen en Sass y cuándo usarlas

Dentro del ecosistema de Sass encontrarás reglas con propósitos muy distintos [0:45]:

• @use: importa módulos, estilos y funciones de otras hojas de estilo.
• @function: te permite crear funciones personalizadas, además de las que Sass ya trae.
• @forward: recibe una URL y carga estilos para que estén disponibles vía @use.
• @extend: se relaciona con el concepto de herencia entre selectores.
• @at-root: carga estilos en la raíz del CSS compilado.
• @include: invoca mixins dentro de tus selectores.

También existen reglas orientadas a la compilación, como @error, @warn y @debug, útiles para detectar problemas en tu código [2:05]. Y para lógica, Sass ofrece estructuras de control como @for, @if, @each y @while, que se pueden usar dentro de funciones.

Qué es nesting en Sass y por qué simplifica tu código

El nesting o anidación de selectores te permite escribir selectores dentro de otros, respetando el orden en que aparecen en tu HTML [3:08]. En lugar de escribir nav p repetidamente en CSS, dentro de Sass puedes meter p dentro del bloque de nav y el compilador entiende la jerarquía.

¿Cuándo conviene usar nesting? Cuando tus elementos están realmente anidados en el HTML, por ejemplo, un nav que contiene ul, li y a. Si los elementos no comparten jerarquía, anidarlos genera CSS confuso.

La ventaja práctica es clara: tu hoja de estilos refleja la estructura del documento, y eso facilita ubicar qué selector pertenece a qué bloque.

Cómo aplicar nesting al estilizar una navbar paso a paso

Para estilizar la navbar del proyecto, primero se preparan los estilos globales del body con background-color usando la variable primary-color y font-family con la variable font-stack [4:35]. Después se ejecuta Sass en modo watch con Ctrl+Shift+P y Watch Sass para compilar en tiempo real.

Cómo agrupar y anidar elementos dentro de la navbar

En el HTML se agrupan los botones de íconos dentro de un div con clase icons, y se reemplazan las etiquetas svg por los archivos de la carpeta assets/svg: profile, wishlist y shopping cart [6:30]. Con esa estructura lista, el bloque Sass queda así:

scss nav { display: flex; justify-content: space-between; padding: 15px; color: $primary-text-color;

p { font-size: 1.5em; padding-left: 30px; }

.icons { display: flex; gap: 15px;

button {
  background: none;
  border-style: none;
}

} }

Aquí el nesting hace su magia: dentro de nav se declaran p, .icons y dentro de esa clase, button. En CSS plano tendrías que escribir nav p, nav .icons y nav .icons button por separado [10:12].

Cómo ajustar tamaños y colores de los SVG

Para unificar el color verde de los íconos se modifica directamente el atributo stroke dentro del path de cada SVG con el hexadecimal extraído de Figma [12:40]. Para cambiar el tamaño de varios íconos a la vez, Cmd+F permite buscar width="24" y reemplazarlo por width="36", y lo mismo con height. Es un truco que ahorra tiempo cuando el archivo crece.

Cómo distribuir los elementos de la navbar con Flexbox

Para que el logotipo quede a un extremo y los íconos al otro, la navbar usa display: flex y justify-content: space-between [14:20]. Esta propiedad reparte el espacio sobrante entre los elementos, dejando el primero pegado al extremo izquierdo y el último al derecho.

• space-between: distribuye el espacio entre elementos, sin margen en los extremos.
• space-around: agrega espacio también a los lados.
• space-evenly: reparte espacio idéntico entre todos los huecos.

Dentro del div.icons se aplica gap: 15px para separar los tres botones, recordando que olvidar la coma o el punto y coma genera errores visibles en la consola de debug de Sass [16:50]. Si Live Sass Compiler no muestra cambios, revisa la sintaxis antes que cualquier otra cosa.

En la siguiente clase se trabajará con expresiones, operaciones y su jerarquía dentro de Sass. ¿Qué otra @rule te gustaría dominar primero? Cuéntame en los comentarios.