Funciones selectores en Sass | Explicado

La hoja de estilo sintácticamente impresionante (SASS) proporciona muchas funciones que se utilizan para diversos fines, como funciones de cadena, funciones numéricas, funciones de mapas, etc. Todas estas funciones facilitan a los usuarios de varias maneras. En este artículo, sin embargo, solo nos centraremos en las funciones selectoras en SaaS. Aprendamos cuáles son estos y cómo se pueden usar estas funciones.

Funciones selectores en SASS

Al igual que las funciones de cadena se utilizan para manejar caracteres de cadena, funciones numéricas para manejar los valores numéricos, de manera similar, las funciones selectores en SASS se utilizan para controlar selectores.

Las funciones selectores en Sass se explican a continuación.

Función IS-SuperSelector (super, sub)

Esta función evalúa si el selector "Super" proporcionado coincide con los elementos proporcionados en "Sub" y devuelve verdadero o falso.

Ejemplo

es.superselector ("div", "entrada")

Producción

verdadero

Aquí hay un ejemplo de una condición falsa.

Ejemplo

es.superselector ("entrada", "div")

Producción

FALSO

Función Selector-Append (selectores)

Esta función agrega los selectores dados en el último (segundo, tercero, cuarto, por lo tanto) al primer selector proporcionado.

Ejemplo

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

Producción

a.activo

Selector-Extend (selector, extendere, extender)

Esta función hace uso de la regla @extend para extender el selector proporcionado. La regla @extend se establece de la siguiente manera.

@Extend Regla

#$ extender
@Extend #$ ExtENDEE;

Función Selector-Nest (Selectores)

Esta función anesta los selectores proporcionados y ofrece un nuevo selector como resultado.

Ejemplo

Selector-Nest (".activo "," a "," div ")

Producción

.activo a, un div

Función Selector-Parse (selector)

Con el fin de obtener una lista de cadenas especificadas en el selector utilizando el formato como se define en el selector principal.

Ejemplo

Selector-PARTE ("P, .aporte, .activo")

Producción

'pag' , '.aporte' , '.activo'

Selector-replace (selector, original, reemplazo)

Esta función reemplaza el selector "original" por el selector de "reemplazo" y proporciona el selector resultante.

Ejemplo

reemplazo selector ("H1.Hola "," H1 "," H2 ")

Producción

H2.Hola

Selector-Unify (Selector1, Selector2) Función

Si los elementos presentes en ambos selectores coinciden, este selector devuelve el selector resultante.

Ejemplo

selector-unify ("A.activo "," a.flotar")

Producción

"a.activo.flotar"

Si los elementos no coinciden.

Ejemplo

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

Producción

NULO

Función de selectores simples (selectores)

Esta función obtiene los selectores individuales del selector de compuestos dado.

Ejemplo

Selectores simples ("P.Entrada: después ")

Producción

P, entrada ,: después

Conclusión

Con el propósito de manipular el comportamiento de los selectores en SASS, se utilizan las funciones del selector. Algunos ejemplos de funciones de selección en SASS son Selector-Append (selectores), Selector-Nest (Selectores), selectores simples (selectores), etc. En el artículo anterior, hemos explicado todas las funciones selectores en SASS junto con ejemplos relevantes.