Anidamiento en SASS

Este artículo explica el anidamiento en SASS.

Explicaremos el anidamiento en SASS paso a paso, incluyendo código de ejemplo para profundizar tu comprensión.

YouTube Video

Anidamiento en SASS

SASS es un lenguaje de hojas de estilo ampliado para CSS que ofrece muchas funciones para un diseño eficiente. Entre ellas, el anidamiento es una función especialmente útil para representar visualmente la estructura jerárquica del CSS.

Conceptos básicos del anidamiento

En SASS, puedes organizar tu código visualmente escribiendo los selectores de CSS en una estructura jerárquica. Por ejemplo, veamos cómo puedes reescribir el siguiente código CSS usando anidamiento.

 1/* CSS */
 2.nav {
 3    background-color: #333;
 4}
 5.nav ul {
 6    margin: 0;
 7    padding: 0;
 8}
 9.nav ul li {
10    list-style: none;
11}
12.nav ul li a {
13    color: #fff;
14    text-decoration: none;
15}

Usando SASS, puedes escribir este código de forma concisa con anidamiento como se muestra a continuación.

 1/* SASS */
 2.nav {
 3    background-color: #333;
 4
 5    ul {
 6        margin: 0;
 7        padding: 0;
 8
 9        li {
10            list-style: none;
11
12            a {
13                color: #fff;
14                text-decoration: none;
15            }
16        }
17    }
18}

• Este código utiliza la función de anidamiento de SASS para describir los estilos del menú de navegación de manera concisa y jerárquica. Al utilizar anidamiento, las relaciones padre-hijo se vuelven visualmente claras y la legibilidad mejora.

Referenciando selectores padres (&)

Cuando necesitas referenciar el selector padre dentro de estilos anidados, usa &. Esto te permite crear selectores con estados o modificadores específicos.

 1.button {
 2    background-color: #007bff;
 3    color: #fff;
 4
 5    &:hover {
 6        background-color: #0056b3;
 7    }
 8
 9    &:active {
10        background-color: #003f7f;
11    }
12}

• Este código usa & en SCSS para definir los estados :hover y :active para el selector padre .button.

CSS generado

 1.button {
 2    background-color: #007bff;
 3    color: #fff;
 4}
 5.button:hover {
 6    background-color: #0056b3;
 7}
 8.button:active {
 9    background-color: #003f7f;
10}

Anidando media queries

En SASS, también puedes anidar media queries. Esto te permite implementar un diseño responsivo manteniendo la relevancia de tus estilos.

 1.container {
 2    width: 100%;
 3
 4    @media (min-width: 768px) {
 5        width: 750px;
 6    }
 7
 8    @media (min-width: 1024px) {
 9        width: 970px;
10    }
11}

• Este código anida una media query dentro de la clase .container, permitiendo un diseño responsivo que cambia el ancho según el tamaño de pantalla.

CSS generado

 1.container {
 2    width: 100%;
 3}
 4@media (min-width: 768px) {
 5    .container {
 6        width: 750px;
 7    }
 8}
 9@media (min-width: 1024px) {
10    .container {
11        width: 970px;
12    }
13}

Puntos a tener en cuenta sobre el anidamiento

Usar demasiado anidamiento puede hacer que tu código tenga demasiadas capas y reducir su mantenibilidad. Debes evitar un anidamiento profundo como en el siguiente ejemplo.

 1.header {
 2    .nav {
 3        ul {
 4            li {
 5                a {
 6                    color: red;
 7                }
 8            }
 9        }
10    }
11}

Este tipo de código está demasiado anidado, por lo que se puede refactorizar de la siguiente manera.

1.header .nav ul li a {
2    color: red;
3}

Ejemplo práctico: barra de navegación

A continuación se muestra un ejemplo de estilos para una barra de navegación usando anidamiento en SASS.

 1.navbar {
 2    background-color: #222;
 3    color: #fff;
 4
 5    ul {
 6        display: flex;
 7        list-style: none;
 8        margin: 0;
 9        padding: 0;
10
11        li {
12            margin-right: 15px;
13
14            a {
15                color: #fff;
16                text-decoration: none;
17
18                &:hover {
19                    text-decoration: underline;
20                }
21            }
22        }
23    }
24}

• Este código organiza y define los estilos para las listas y enlaces dentro de la barra de navegación, incluyendo efectos hover, usando anidamiento en SASS.

CSS generado

 1.navbar {
 2    background-color: #222;
 3    color: #fff;
 4}
 5.navbar ul {
 6    display: flex;
 7    list-style: none;
 8    margin: 0;
 9    padding: 0;
10}
11.navbar ul li {
12    margin-right: 15px;
13}
14.navbar ul li a {
15    color: #fff;
16    text-decoration: none;
17}
18.navbar ul li a:hover {
19    text-decoration: underline;
20}

Resumen

La función de anidamiento en SASS es una herramienta poderosa para describir de forma concisa la estructura jerárquica del CSS y mejorar la legibilidad. Sin embargo, es importante evitar el anidamiento excesivo y organizar bien tu código.

Puedes seguir el artículo anterior utilizando Visual Studio Code en nuestro canal de YouTube. Por favor, también revisa nuestro canal de YouTube.

YouTube Video