Cómo anidar las reglas y propiedades en sass?

El acrónimo de Sass para la hoja de estilo sintácticamente impresionante es un preprocesador y extensión de CSS que funciona bien con todas las versiones de CSS. Es conocido por su sintaxis limpia y bien estructurada que, como resultado, mejora la capacidad del lenguaje básico. Sass facilita a sus usuarios al admitir el uso de variables, anidaciones, mezclas, herencia, etc. El tema en discusión en este artículo está anidando en sass. Aquí demostraremos cómo puede anidar las reglas y las propiedades en sass.

Cómo anidar las reglas en sass

La anidación se considera el procedimiento de combinar varias reglas. Sass permite a sus usuarios anidar las reglas, evitando que escriba selectores exteriores una y otra vez, lo que hace que el código sea claro y más legible que el CSS básico.

Ejemplo
El ejemplo demostrado a continuación muestra cómo se hace la anidación en sass.

Html

• Hogar
>

• Servicios


• Sobre nosotros


• Contáctenos

En el código anterior, estamos creando una barra lateral haciendo un recipiente Div y anidando una lista desordenada dentro de él. Además, también hemos proporcionado el enlace del archivo CSS generado después de compilar nuestro archivo SASS al atributo HREF de la etiqueta.

Hablar con descaro a

div
flotador izquierdo;
Ancho: 25%;
Color de fondo: Rosybrown;
relleno: 25px 15px;
ul
Tipo de estilo de lista: Ninguno;
margen: 0;
relleno: 0;

li
relleno: 8px;
margen-fondo: 15px;
Color de fondo: ciruela;
color blanco;

Ahora notará que en el archivo SASS primero estamos diseñando nuestro contenedor Div y luego anidamos nuestros selectores UL, y está dentro del selector Div. Sin embargo, el mismo código anterior en CSS estándar se vería algo así.

CSS

div
flotador izquierdo;
Ancho: 25%;
Color de fondo: Rosybrown;
relleno: 25px 15px;

Div ul
Tipo de estilo de lista: Ninguno;
margen: 0;
relleno: 0;

div li
relleno: 8px;
margen-fondo: 15px;
Color de fondo: ciruela;
color blanco;

En el código anterior, verá que tenemos que usar el selector Div con cualquier otro selector para diseñar nuestros diversos elementos. En CSS, no puede anidar selectores/reglas entre sí, sino que tiene que definirlos uno por uno.

Esta es la ventaja que Sass tiene sobre CSS de que evita que sus usuarios repitan selectores redundantes que hacen que el código sea claro y más legible. La salida del ejemplo anterior se muestra a continuación.

Producción

Se generó una barra lateral y se diseñó usando anidación en sass.

Cómo anidar las propiedades en sass

Otra ventaja de Sass es que también permite anidar las propiedades. Debe haber notado que el prefijo de varias propiedades de CSS es el mismo como el tamaño de la fuente, la familia de fuentes, el peso de la fuente, etc. La fuente de prefijo es la misma en estas propiedades.

Ahora para evitar usar este prefijo una y otra vez en su hoja de estilo, puede anidar estas propiedades en sass. Debes preguntarte cómo hacerlo. Consulte el ejemplo a continuación.

Ejemplo
Este ejemplo muestra cómo anidar las propiedades en sass.

Html

Este es un párrafo.

En el código anterior, simplemente hemos creado un párrafo.

Hablar con descaro a

cuerpo
fondo:

color rosa;
Adjunto: fijo;


pags
fuente:

Familia: Verdana;
Tamaño: 20px;
Peso: en negrita;

Ahora notará en el código anterior que al diseñar nuestros elementos con varias propiedades de CSS, escribimos el prefijo una vez y luego anidó las propiedades relacionadas con ese prefijo dentro del selector. De esta manera evitamos escribir el mismo prefijo una y otra vez.

CSS

Esta es la salida de CSS transpilado.

Producción

Los elementos fueron diseñados con éxito usando anidación en sass.

Conclusión

Con el propósito de anidar las reglas en sass, solo tiene que escribir el selector externo una vez y anidar el resto de los selectores dentro de él. Mientras tanto, las propiedades de anidación en SASS le permiten escribir el prefijo de propiedades una vez y anidar las propiedades relacionadas dentro de él. Las reglas y propiedades de anidación en SASS le impiden escribir valores de CSS redundantes repetidamente, lo que hace que su código sea claro y más legible. Este artículo lo guía sobre cómo anidar las reglas y las propiedades en sass.