Fonctions du sélecteur dans SASS | Expliqué

Syntactical Awesome Stylesheet (SASS) fournit de nombreuses fonctions utilisées à diverses fins telles que les fonctions de chaîne, les fonctions numériques, les fonctions de carte, etc. Toutes ces fonctions facilitent les utilisateurs de diverses manières. Dans cet article, cependant, nous nous concentrerons uniquement sur les fonctions de sélecteur en SaaS. Apprenons ce que ce sont et comment ces fonctions peuvent être utilisées.

Fonctions du sélecteur dans SASS

Comme les fonctions de chaîne sont utilisées pour gérer les caractères de chaîne, les fonctions numériques pour gérer les valeurs numériques, de même, les fonctions de sélecteur dans SASS sont utilisées pour contrôler les sélecteurs.

Les fonctions du sélecteur dans SASS sont expliquées ci-dessous.

Fonction IS-SuperSelector (Super, Sub)

Cette fonction évalue si le sélecteur «super» fourni correspond aux éléments fournis dans «sub» et renvoie vrai ou faux.

Exemple

est.superselector («div», «entrée»)

Sortir

vrai

Voici un exemple de fausse condition.

Exemple

est.superselector («entrée», «div»)

Sortir

FAUX

Fonction de sélecteur (sélecteurs)

Cette fonction ajoute les sélecteurs donnés dans le dernier (deuxième, troisième, quatrième, donc) au premier sélecteur fourni.

Exemple

sélecteur («a», «.actif")

Sortir

un.actif

Sélecteur-extension (sélecteur, extension, extension)

Cette fonction utilise la règle @Extend pour étendre le sélecteur fourni. La règle @Extend est indiquée comme suit.

Règle @Extend

# $ extender
@Extend # $ extendee;

Fonction de sélecteur (sélecteurs)

Cette fonction niche les sélecteurs fournis et donne un nouveau sélecteur en conséquence.

Exemple

Nest de sélecteur (".actif »,« a »,« div »)

Sortir

.actif A, un div

Fonction sélecteur-parse (sélecteur)

Dans le but de récupérer une liste de chaînes spécifiées dans le sélecteur en utilisant le format tel que défini dans le sélecteur parent.

Exemple

sélecteur-parse («p, .saisir, .actif")

Sortir

'P', '.saisir' , '.actif'

Sélecteur-REPLACER (sélecteur, original, remplacement)

Cette fonction remplace le sélecteur «d'origine» par le sélecteur «Remplacement» et fournit le sélecteur résultant.

Exemple

Sélecteur-Replace («H1.Bonjour »,« H1 »,« H2 »)

Sortir

h2.Bonjour

Fonction sélector-Unify (Selector1, Selector2)

Si les éléments présents dans les deux sélecteurs correspondent, ce sélecteur renvoie le sélecteur résultant.

Exemple

sélecteur-unify («un.actif »,« A.flotter")

Sortir

"un.actif.flotter"

Si les éléments ne correspondent pas.

Exemple

Selector-Unify («A», «P»)

Sortir

NUL

fonction de sélecteurs simples (sélecteurs)

Cette fonction récupère les sélecteurs individuels du sélecteur de composé donné.

Exemple

sélecteurs simples («p.Entrée: après ”)

Sortir

P, entrée ,: après

Conclusion

Dans le but de manipuler le comportement des sélecteurs dans SASS, les fonctions de sélecteur sont utilisées. Quelques exemples de fonctions de sélecteur dans SASS sont des sélecteurs (sélecteurs), nid sélecteur (sélecteurs), sélecteurs simples (sélecteurs), etc. Dans l'article ci-dessus, nous avons expliqué toutes les fonctions de sélecteur dans SASS ainsi que des exemples pertinents.