Sass-Selektorfunktionen

Sass-Selektorfunktionen

Selector-Funktionen dienen dazu, Selectoren zu überprüfen und zu manipulieren.

Die nachstehende Tabelle listet alle Selector-Funktionen in Sass auf:

Funktion Beschreibung & Beispiel
is-superselector(super, sub)

Überprüfen super Ob der Selector übereinstimmt sub Alle übereinstimmenden Elemente.

Beispiel:

is-superselector("div", "div.myInput")

Ergebnis: true

is-superselector("div.myInput", "div")

Ergebnis: false

is-superselector("div", "div")

Ergebnis: true
selector-append(Selektoren)

Fügt den zweiten (und dritten/vierten usw.) Selector dem ersten Selector hinzu.

Beispiel:

selector-append("div", ".myInput")

Ergebnis: div.myInput

selector-append(".warning", "__a")

Ergebnis: .warning__a
selector-extend(selector, extendee, extender)
selector-nest(Selektoren)

Gibt einen neuen Selector mit der CSS-Selector-Nested-Liste zurück, basierend auf der angegebenen Liste.

Beispiel:

selector-nest("ul", "li")

Ergebnis: ul li

selector-nest(".warning", "alert", "div")

Ergebnis: .warning div, alert div
selector-parse(selector)

Gibt die Zeichenfolgenliste im Selector in gleicher Form wie den übergeordneten Selector zurück.

Beispiel:

selector-parse("h1 .myInput .warning")

Ergebnis: ('h1' '.myInput' '.warning')
selector-replace(selector, original, replacement)

Rückgabe eines neuen Selektors, mit replacement in der angegebenen Selektor durch original in der angegebenen Selektor.

Beispiel:

selector-replace("p.warning", "p", "div")

Ergebnis: div.warning
selector-unify(selector1, selector2)

Rückgabe eines neuen Selektors, der nur mit selector1 und selector2 passende Elemente.

Beispiel:

selector-unify("myInput", ".disabled")

Ergebnis: myInput.disabled

selector-unify("p", "h1")

Ergebnis: null
simple-selectors(Selektoren)

Rückgabe Selektoren Liste der verschiedenen Selektoren.

Beispiel:

simple-selectors("div.myInput")

Ergebnis: div, .myInput

simple-selectors("div.myInput:before")

Ergebnis: div, .myInput, :before