Funções de seletor no SASS | Explicado

SINTACTICALMENTE AMPRESSIONATIVA SHAST (SASS) fornece muitas funções usadas para vários propósitos, como funções de string, funções numéricas, funções de mapa etc. Todas essas funções facilitam os usuários de várias maneiras. Nesta redação, no entanto, vamos nos concentrar apenas nas funções de seletor em SaaS. Vamos aprender o que são e como essas funções podem ser usadas.

Funções de seletor em sass

Assim como as funções de string são usadas para lidar com caracteres de string, funções numéricas para lidar com valores numéricos, da mesma forma, as funções seletoras no SASS são usadas para controlar seletores.

As funções de seletor em Sass são explicadas abaixo.

Função IS-SUPERSELECTOR (super, sub)

Esta função avalia se o seletor "super" fornecido corresponde aos elementos fornecidos em "sub" e retorna verdadeiro ou falso.

Exemplo

é.Superselector ("div", "entrada")

Saída

verdadeiro

Aqui está um exemplo de uma condição falsa.

Exemplo

é.Superselector ("Entrada", "Div")

Saída

falso

Função de seletor-Apenda (seletores)

Esta função adiciona os seletores fornecidos no último (segundo, terceiro, quarto, assim por diante) ao primeiro seletor fornecido.

Exemplo

Seletor-Apend ("A", ".ativo")

Saída

a.ativo

Função seletora-estenda (seletor, Extendee, Extender)

Esta função faz uso da regra @extend para estender o seletor fornecido. A regra @extend é declarada da seguinte maneira.

@Extend Regra

#$ extender
@extend #$ extendee;

Função seletora-nest (seletores)

Esta função aninha os seletores fornecidos e fornece um novo seletor como resultado.

Exemplo

seletor-nest (“.ativo "," a "," div ")

Saída

.ativo a, um div

Função seletora-parse (seletor)

Com o objetivo de buscar uma lista de strings especificadas no seletor usando o formato, conforme definido no seletor de pais.

Exemplo

seletor-parse (“P, .entrada, .ativo")

Saída

'P', '.entrada' , '.ativo'

Função seletora (seletor, original, substituição)

Esta função substitui o seletor "original" pelo seletor "substituto" e fornece o seletor resultante.

Exemplo

seletor-substituto (“H1.Olá "," H1 "," H2 ")

Saída

H2.olá

Função Seletor-Unify (Selector1, Selector2)

Se os elementos presentes em ambos os seletores correspondem, este seletor retornará o seletor resultante.

Exemplo

seletor-unificar (“A.ativo ”,“ A.flutuar")

Saída

"a.ativo.flutuar"

Se os elementos não corresponderem.

Exemplo

seletor-unify ("A", "P")

Saída

NULO

Função simples-seletores (seletores)

Esta função busca os seletores individuais do seletor de composto fornecido.

Exemplo

selecionadores simples (“P.Entrada: depois ”)

Saída

p, entrada: depois

Conclusão

Para fins de manipular o comportamento dos seletores em SASS, as funções seletoras são usadas. Alguns exemplos de funções de seletor no SASS são seletor-Append (Selectors), seletor-Nest (Selectors), simples-selecionadores (seletores), etc. No artigo acima, explicamos todas as funções de seletor em SASS, juntamente com exemplos relevantes.