Comment nicher les règles et les propriétés dans SASS?

L'acronyme SASS pour Stylesheet Syntactical Awesome est un pré-processeur et une extension de CSS qui fonctionne bien avec toutes les versions de CSS. Il est bien connu pour sa syntaxe propre et bien structurée qui, par conséquent, améliore la capacité de la langue de base. SASS facilite ses utilisateurs en soutenant l'utilisation des variables, de la nidification, des mixins, de l'héritage, etc. Le sujet en discussion dans cet article niche dans SASS. Ici, nous montrerons comment vous pouvez nicher les règles et les propriétés dans SASS.

Comment nicher les règles dans SASS

La nidification est considérée comme la procédure de combinaison de diverses règles. SASS permet à ses utilisateurs de nicher les règles, empêchant d'écrire des sélecteurs extérieurs encore et encore, ce qui rend le code clair et plus lisible que le CSS de base.

Exemple
L'exemple démontré ci-dessous montre comment la nidification de Sass est faite.

Html

• Maison
>

• Prestations de service


• À propos de nous


• Contactez-nous

Dans le code ci-dessus, nous créons une barre latérale en faisant un conteneur Div et en niant une liste non ordonnée à l'intérieur. De plus, nous avons également fourni le lien du fichier CSS généré après avoir compilé notre fichier SASS à l'attribut HREF de la balise.

Toupet

div
flottant: à gauche;
Largeur: 25%;
Color en arrière-plan: Rosybrown;
rembourrage: 25px 15px;
ul
Type de style liste: aucun;
marge: 0;
rembourrage: 0;

li
rembourrage: 8px;
marge-fond: 15px;
Color d'arrière-plan: Plum;
Couleur blanche;

Maintenant, vous remarquerez que dans le fichier sass, nous stylisons d'abord notre conteneur div, puis nichent nos sélecteurs UL, et Li à l'intérieur du sélecteur div. Cependant, le même code ci-dessus dans CSS standard ressemblerait à quelque chose comme ça.

CSS

div
flottant: à gauche;
Largeur: 25%;
Color en arrière-plan: Rosybrown;
rembourrage: 25px 15px;

div ul
Type de style liste: aucun;
marge: 0;
rembourrage: 0;

div li
rembourrage: 8px;
marge-fond: 15px;
Color d'arrière-plan: Plum;
Couleur blanche;

Dans le code ci-dessus, vous verrez que nous devons utiliser le sélecteur DIV avec tous les autres sélecteurs pour styliser nos différents éléments. Dans CSS, vous ne pouvez pas nicher de sélecteurs / règles les uns dans les autres, vous devez les définir un par un.

C'est l'avantage que Sass a sur CSS qu'il empêche ses utilisateurs de répéter les sélecteurs redondants, ce qui rend le code clair et plus lisible. La sortie de l'exemple ci-dessus est illustrée ci-dessous.

Sortir

Une barre latérale a été générée et stylée en utilisant la nidification dans Sass.

Comment nicher les propriétés dans SASS

Un autre avantage de Sass est qu'il permet également la nidification des propriétés. Vous devez avoir remarqué que le préfixe de diverses propriétés CSS est la même que la taille de la police, la famille, la police, etc. La police du préfixe est la même dans ces propriétés.

Maintenant, pour éviter d'utiliser ce préfixe encore et encore dans votre feuille de style, vous pouvez nist ces propriétés dans SASS. Vous devez vous demander comment le faire. Consultez l'exemple ci-dessous.

Exemple
Cet exemple montre comment nicher les propriétés dans SASS.

Html

C'est un paragraphe.

Dans le code ci-dessus, nous avons simplement créé un paragraphe.

Toupet

corps
arrière-plan:

Couleur rose;
Attachement: fixe;


p
Police de caractère:

Famille: Verdana;
Taille: 20px;
Poids: Audacieux;

Maintenant, vous remarquerez dans le code ci-dessus que lorsque vous stylisez nos éléments avec diverses propriétés CSS, nous avons écrit le préfixe une fois, puis niché les propriétés liées à ce préfixe à l'intérieur du sélecteur. De cette façon, nous avons évité d'écrire le même préfixe encore et encore.

CSS

Ceci est la sortie CSS transpirée.

Sortir

Les éléments ont été stylisés avec succès en utilisant la nidification dans SASS.

Conclusion

Aux fins des règles de nidification dans SASS, il suffit d'écrire une fois le sélecteur extérieur et de nid le reste des sélecteurs à l'intérieur. Pendant ce temps, les propriétés de nidification de Sass vous permet d'écrire une fois le préfixe des propriétés et de nicher les propriétés connexes à l'intérieur. Les règles et les propriétés de nidification dans SASS vous empêchent d'écrire des valeurs CSS redondantes à plusieurs reprises, ce qui rend votre code clair et plus lisible. Cet article vous guide sur la façon de nicher les règles et les propriétés dans SASS.