sass:selector

Dart Sass: seit 1.23.0
LibSass: ✗
Ruby Sass: ✗

Nur Dart Sass unterstützt derzeit das Laden von integrierten Modulen mit @use. Benutzer anderer Implementierungen müssen Funktionen stattdessen über ihre globalen Namen aufrufen.

Selector ValuesSelector Values permalink

Die Funktionen in diesem Modul inspizieren und manipulieren Selektoren. Wann immer sie einen Selektor zurückgeben, ist es immer eine durch Kommas getrennte Liste (die Selektorliste), die durch Leerzeichen getrennte Listen (die komplexen Selektoren) enthält, die wiederum unquoted Strings (die zusammengesetzten Selektoren) enthalten. Zum Beispiel würde der Selektor .main aside:hover, .sidebar p als

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

Selektorargumente für diese Funktionen können im gleichen Format vorliegen, aber sie können auch einfach normale Strings (quoted oder unquoted) oder eine Kombination davon sein. Zum Beispiel ist ".main aside:hover, .sidebar p" ein gültiges Selektorargument.

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

Gibt zurück, ob der Selektor $super alle Elemente abgleicht, die der Selektor $sub abgleicht.

Gibt immer noch true zurück, auch wenn $super *mehr* Elemente abgleicht als $sub.

Die Selektoren $super und $sub dürfen Placeholder-Selektoren enthalten, aber keine Elternselektoren.

  SCSS

  Sass

       SpielplatzSCSS-Syntax@use "sass:selector";

@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

       SpielplatzSass-Syntax@use "sass:selector"

@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

Kombiniert $selectors ohne Nachfahrenkombinatoren – das heißt, ohne Leerzeichen dazwischen.

Wenn ein Selektor in $selectors eine Selektorliste ist, wird jeder komplexe Selektor separat kombiniert.

Die $selectors dürfen Placeholder-Selektoren enthalten, aber keine Elternselektoren.

Siehe auch selector.nest().

  SCSS

  Sass

       SpielplatzSCSS-Syntax@use "sass:selector";

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

       SpielplatzSass-Syntax@use "sass:selector"

@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

Erweitert $selector wie mit der @extend-Regel.

Gibt eine Kopie von $selector zurück, modifiziert mit der folgenden @extend-Regel

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

Mit anderen Worten: Ersetzt alle Vorkommen von $extendee in $selector durch $extendee, $extender. Wenn $selector $extendee nicht enthält, wird es unverändert zurückgegeben.

Die Selektoren $selector, $extendee und $extender dürfen Placeholder-Selektoren enthalten, aber keine Elternselektoren.

Siehe auch selector.replace().

  SCSS

  Sass

       SpielplatzSCSS-Syntax@use "sass:selector";

@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

       SpielplatzSass-Syntax@use "sass:selector"

@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

Kombiniert $selectors, als ob sie ineinander verschachtelt wären im Stylesheet.

Die $selectors dürfen Placeholder-Selektoren enthalten. Im Gegensatz zu anderen Selektorfunktionen dürfen alle außer der ersten auch Elternselektoren enthalten.

Siehe auch selector.append().

  SCSS

  Sass

       SpielplatzSCSS-Syntax@use "sass:selector";

@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

       SpielplatzSass-Syntax@use "sass:selector"

@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

Gibt $selector im Selektorwertformat zurück.

  SCSS

  Sass

       SpielplatzSCSS-Syntax@use "sass:selector";

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

       SpielplatzSass-Syntax@use "sass:selector"

@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

Gibt eine Kopie von $selector zurück, bei der alle Vorkommen von $original durch $replacement ersetzt wurden.

Dies verwendet die @extend-Regel und ihre intelligente Vereinheitlichung, um sicherzustellen, dass $replacement nahtlos in $selector integriert wird. Wenn $selector $original nicht enthält, wird es unverändert zurückgegeben.

Die Selektoren $selector, $original und $replacement dürfen Placeholder-Selektoren enthalten, aber keine Elternselektoren.

Siehe auch selector.extend().

  SCSS

  Sass

       SpielplatzSCSS-Syntax@use "sass:selector";

@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

       SpielplatzSass-Syntax@use "sass:selector"

@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

Gibt einen Selektor zurück, der nur Elemente abgleicht, die von *beiden* Selektoren $selector1 und $selector2 abgedeckt werden.

Gibt null zurück, wenn $selector1 und $selector2 keine gemeinsamen Elemente abgleichen oder wenn es keinen Selektor gibt, der ihre Überlappung ausdrücken kann.

Ähnlich wie bei durch die @extend-Regel generierten Selektoren ist nicht garantiert, dass der zurückgegebene Selektor *alle* von beiden $selector1 und $selector2 abgedeckten Elemente abgleicht, wenn beides komplexe Selektoren sind.

  SCSS

  Sass

       SpielplatzSCSS-Syntax@use "sass:selector";

@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

       SpielplatzSass-Syntax@use "sass:selector"

@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

Gibt eine Liste von einfachen Selektoren in $selector zurück.

Der $selector muss ein einzelner String sein, der einen zusammengesetzten Selektor enthält. Das bedeutet, er darf keine Kombinatoren (einschließlich Leerzeichen) oder Kommas enthalten.

Die zurückgegebene Liste ist durch Kommas getrennt, und die einfachen Selektoren sind unquoted Strings.

  SCSS

  Sass

       SpielplatzSCSS-Syntax@use "sass:selector";

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

       SpielplatzSass-Syntax@use "sass:selector"

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