Funzioni di selezione in Sass | Spiegato

Il foglio di stile sintatticamente fantastico (SASS) fornisce molte funzioni utilizzate per vari scopi come funzioni di stringa, funzioni numeriche, funzioni di mappa ecc. Tutte queste funzioni facilitano gli utenti in vari modi. In questo articolo, tuttavia, ci concentreremo solo sulle funzioni selettori in SaaS. Scopriamo cosa sono e come possono essere utilizzate queste funzioni.

Funzioni di selezione in SASS

Come le funzioni di stringa vengono utilizzate per gestire i caratteri della stringa, le funzioni numeriche per gestire i valori numerici, allo stesso modo, vengono utilizzate le funzioni di selezione in SASS per controllare i selettori.

Le funzioni selettori in SASS sono spiegate di seguito.

funzione IS-SupersElector (super, sub)

Questa funzione valuta se il selettore "super" fornito corrisponde agli elementi forniti in "sub" e restituisce vero o falso.

Esempio

È.Superselector ("Div", "Input")

Produzione

VERO

Ecco un esempio di una falsa condizione.

Esempio

È.Superselector ("Input", "Div")

Produzione

falso

funzione selettore-append (selettori)

Questa funzione aggiunge i selettori indicati nell'ultimo (secondo, terzo, quarto, così via) al primo selettore fornito.

Esempio

Selector-Append ("A", ".attivo")

Produzione

UN.attivo

Selector-Extend (selettore, estensione, estensione)

Questa funzione utilizza la regola @Extend per estendere il selettore fornito. La regola @Extend è indicata come segue.

@extend regola

#$ extender
@extend #$ estendi;

funzione selettore nido (selettori)

Questa funzione nidifica i selettori forniti e di conseguenza fornisce un nuovo selettore.

Esempio

selettore nido (".attivo "," a "," div ")

Produzione

.Active A, A Div

Funzione Selector-Parse (Selector)

Ai fini di recuperare un elenco di stringhe specificate nel selettore utilizzando il formato come definito nel selettore genitore.

Esempio

Paraggio selettore ("P, .ingresso, .attivo")

Produzione

'P' , '.Input ','.attivo'

Selettore-replace (selettore, originale, sostituzione) funzione

Questa funzione sostituisce il selettore "originale" per selettore "sostituzione" e fornisce il selettore risultante.

Esempio

Selettore-Riposto ("H1.Ciao "," H1 "," H2 ")

Produzione

H2.Ciao

funzione selector-unify (selector1, selector2)

Se gli elementi presenti in entrambi i selettori corrispondono, questo selettore restituisce il selettore risultante.

Esempio

selettore-unifie ("a.attivo "," a.hover ”)

Produzione

"UN.attivo.in bilico "

Se gli elementi non corrispondono.

Esempio

Selector-Unify ("A", "P")

Produzione

NULLO

funzione di selettori semplici (selettori)

Questa funzione prende i singoli selettori dal selettore composto dato.

Esempio

Selettori semplici ("P.Input: dopo ”)

Produzione

p, input ,: dopo

Conclusione

Ai fini di manipolare il comportamento dei selettori in SASS, vengono utilizzate le funzioni di selezione. Alcuni esempi di funzioni di selezione in SASS sono selettori-appendici (selettori), selettore-nido (selettori), selettori semplici (selettori), ecc. Nell'articolo sopra, abbiamo spiegato tutte le funzioni di selezione in SASS insieme a esempi pertinenti.