sass:selector

Compatibilidade:
Sass de Dart
since 1.23.0
LibSass
✗
Sass de Ruby
✗

Atualmente apenas a Sass de Dart suporta carregar módulos embutidos com a @use. Os utilizadores de outras implementações devem chamar as funções usando os seus nomes globais.

Valores de SeletorValores de Seletor permalink

As funções neste módulo inspecionam e manipulam os seletores. Sempre que retornam um seletor, é sempre uma lista separada por vírgula (a lista de seletor) que contém listas separadas por espaço (os seletores complexos) que contém sequências de caracteres sem aspas (os seletores compostos). Por exemplo, o seletor .main aside:hover, .sidebar p seria retornado como:

@debug ((unquote(".main") unquote("aside:hover")),
        (unquote(".sidebar") unquote("p")));
// .main aside:hover, .sidebar p

Os argumentos de seletor para estas funções podem estar no mesmo formato, mas também podem apenas ser sequências de caracteres normais (com aspas ou sem aspas), ou uma combinação. Por exemplo, ".main aside:hover, .sidebar p" é um argumento de seletor válido.

selector.is-superselector($super, $sub)
is-superselector($super, $sub) //=> boolean

Retorna verdadeiro se o seletor $super corresponder todos os elementos que o seletor $sub corresponder.

Continua a retornar verdadeiro mesmo se $super corresponder mais elementos do que $sub.

Os seletores $super e $sub podem conter seletores de espaço reservado, mas não seletores de pai:

SCSS Syntax

@debug selector.is-superselector("a", "a.disabled"); // true
@debug selector.is-superselector("a.disabled", "a"); // false
@debug selector.is-superselector("a", "sidebar a"); // true
@debug selector.is-superselector("sidebar a", "a"); // false
@debug selector.is-superselector("a", "a"); // true

Sass Syntax

@debug selector.is-superselector("a", "a.disabled")  // true
@debug selector.is-superselector("a.disabled", "a")  // false
@debug selector.is-superselector("a", "sidebar a")  // true
@debug selector.is-superselector("sidebar a", "a")  // false
@debug selector.is-superselector("a", "a")  // true

selector.append($selectors...)
selector-append($selectors...) //=> selector

Combina $selectors sem os combinadores de descendente — que está, sem espaço em branco entre eles.

Se qualquer seletor em $selectors for uma lista de seletor, cada seletor complexo é combinado separadamente.

O $selectors pode conter seletores de espaço reservado, mas não seletores de pai.

Consulte também selector.nest().

SCSS Syntax

@debug selector.append("a", ".disabled"); // a.disabled
@debug selector.append(".accordion", "__copy"); // .accordion__copy
@debug selector.append(".accordion", "__copy, __image");
// .accordion__copy, .accordion__image

Sass Syntax

@debug selector.append("a", ".disabled")  // a.disabled
@debug selector.append(".accordion", "__copy")  // .accordion__copy
@debug selector.append(".accordion", "__copy, __image")
// .accordion__copy, .accordion__image

selector.extend($selector, $extendee, $extender)
selector-extend($selector, $extendee, $extender) //=> selector

Estende $selector de acordo com a [regra @extend].

Retorna uma cópia de $seletor modificado com a seguinte regra @extend:

#{$extender} {
  @extend #{$extendee};
}

Em outras palavras, substitui todas as instâncias de $extendee no $selector com $extendee, $extender. Se $selector não contém $extendee, retorna-o como está.

Os seletores $selector, $extendee, e $extender podem conter seletores de espaço reservado , mas não seletores de pai.

Consulte também selector.replace().

SCSS Syntax

@debug selector.extend("a.disabled", "a", ".link"); // a.disabled, .link.disabled
@debug selector.extend("a.disabled", "h1", "h2"); // a.disabled
@debug selector.extend(".guide .info", ".info", ".content nav.sidebar");
// .guide .info, .guide .content nav.sidebar, .content .guide nav.sidebar

Sass Syntax

@debug selector.extend("a.disabled", "a", ".link")  // a.disabled, .link.disabled
@debug selector.extend("a.disabled", "h1", "h2")  // a.disabled
@debug selector.extend(".guide .info", ".info", ".content nav.sidebar")
// .guide .info, .guide .content nav.sidebar, .content .guide nav.sidebar

selector.nest($selectors...)
selector-nest($selectors...) //=> selector

Combina $selectors como se estivessem encaixados dentro dum do outro na folha de estilo.

O $selectors pode conter seletores de espaço reservado. Ao contrário de outras funções de seletor, todas elas exceto a primeira também podem conter seletores de pai.

Consulte também selector.append().

SCSS Syntax

@debug selector.nest("ul", "li"); // ul li
@debug selector.nest(".alert, .warning", "p"); // .alert p, .warning p
@debug selector.nest(".alert", "&:hover"); // .alert:hover
@debug selector.nest(".accordion", "&__copy"); // .accordion__copy

Sass Syntax

@debug selector.nest("ul", "li")  // ul li
@debug selector.nest(".alert, .warning", "p")  // .alert p, .warning p
@debug selector.nest(".alert", "&:hover")  // .alert:hover
@debug selector.nest(".accordion", "&__copy")  // .accordion__copy

selector.parse($selector)
selector-parse($selector) //=> selector

Retorna $selector no formato do valor do seletor:

SCSS Syntax

@debug selector.parse(".main aside:hover, .sidebar p");
// ((unquote(".main") unquote("aside:hover")),
//  (unquote(".sidebar") unquote("p")))

Sass Syntax

@debug selector.parse(".main aside:hover, .sidebar p")
// ((unquote(".main") unquote("aside:hover")),
//  (unquote(".sidebar") unquote("p")))

selector.replace($selector, $original, $replacement)
selector-replace($selector, $original, $replacement) //=> selector

Retorna uma cópia de $selector com todas as instâncias de $original substituídas pelo $replacement.

Isto usa a unificação inteligente da regra @extend para garantir que $replacement é integrado de maneira transparente ao $selector. Se $selector não contiver $original, retorna-o como está.

Os seletores $selector, $original, e $replacement podem conter seletores de espaço reservado, mas nao seletores de pai.

Consulte também selector.extend().

SCSS Syntax

@debug selector.replace("a.disabled", "a", ".link"); // .link.disabled
@debug selector.replace("a.disabled", "h1", "h2"); // a.disabled
@debug selector.replace(".guide .info", ".info", ".content nav.sidebar");
// .guide .content nav.sidebar, .content .guide nav.sidebar

Sass Syntax

@debug selector.replace("a.disabled", "a", ".link")  // .link.disabled
@debug selector.replace("a.disabled", "h1", "h2")  // a.disabled
@debug selector.replace(".guide .info", ".info", ".content nav.sidebar")
// .guide .content nav.sidebar, .content .guide nav.sidebar

selector.unify($selector1, $selector2)
selector-unify($selector1, $selector2) //=> selector | null

Retorna um seletor que corresponde apenas os elementos correspondidos por ambos $selector1 e $selector2.

Retorna null se $selector1 e $selector2 não correspondem nenhum dos mesmos elementos, ou se não existir seletor que pode expressar suas sobreposições.

Tal como os seletores gerados pela regra @extend, o seletor retornado não dá garantia de corresponder todos os elementos correspondidos por ambos $selector1 e $selector2 se forem ambos seletores complexos:

SCSS Syntax

@debug selector.unify("a", ".disabled"); // a.disabled
@debug selector.unify("a.disabled", "a.outgoing"); // a.disabled.outgoing
@debug selector.unify("a", "h1"); // null
@debug selector.unify(".warning a", "main a"); // .warning main a, main .warning a

Sass Syntax

@debug selector.unify("a", ".disabled")  // a.disabled
@debug selector.unify("a.disabled", "a.outgoing")  // a.disabled.outgoing
@debug selector.unify("a", "h1")  // null
@debug selector.unify(".warning a", "main a")  // .warning main a, main .warning a

selector.simple-selectors($selector)
simple-selectors($selector) //=> list

Retorna uma lista de seletores simples no $selector.

O $seletor deve ser uma única sequência de caracteres que contém um seletor composto. Isto significa que não pode conter combinadores (incluindo espaços) ou vírgulas.

A lista retornada é separada por vírgula, e os seletores simples são sequências de caracteres sem aspas:

SCSS Syntax

@debug selector.simple-selectors("a.disabled"); // a, .disabled
@debug selector.simple-selectors("main.blog:after"); // main, .blog, :after

Sass Syntax

@debug selector.simple-selectors("a.disabled")  // a, .disabled
@debug selector.simple-selectors("main.blog:after")  // main, .blog, :after