Sass-Selektorfunktionen
Sass-FunktionenSass-Selektorfunktionen werden verwendet, um Selektoren zu untersuchen und zu manipulieren.
Die folgende Tabelle listet Sass' Selektorfunktionen auf:
| Funktion | Beschreibung & Beispiel |
|---|---|
| is-superselector(super, sub) | Vergleicht den Übereinstimmungsbereich zweier Selektoren, d. h., bestimmtsuperob der Selektorsubden vom Selektor abgeglichenen Bereich enthält; wenn ja, gibt true zurück, andernfalls false. Beispiel: is-superselector("div", "div.myInput") Ergebnis: true is-superselector("div.myInput", "div") Ergebnis: false is-superselector("div", "div") Ergebnis: true |
| selector-append(selectors) | Hängt den zweiten (oder mehrere) an das Ende des ersten Selektors an.
Selektor. Beispiel: selector-append("div", ".myInput") Ergebnis: div.myInput selector-append(".warning", "__a") Ergebnis: .warning__a |
| selector-extend(selector, extendee, extender) | |
| selector-nest(selectors) | Gibt einen neuen Selektor zurück, der aus der bereitgestellten Liste von Selektoren eine verschachtelte Liste erzeugt. Beispiel: selector-nest("ul", "li") Ergebnis: ul li selector-nest(".warning", "alert", "div") Ergebnis: .warning div, alert div |
| selector-parse(selector) | Konvertiert einen String-Selektorselectorin eine Selektorliste. Beispiel: selector-parse("h1 .myInput .warning") Ergebnis: ('h1' '.myInput' '.warning') |
| selector-replace(selector, original, replacement) | Nimmt einen Selektor entgegen und gibt eine neue Selektorliste zurück, nachdem original durch replacement ersetzt wurde. Beispiel: selector-replace("p.warning", "p", "div") Ergebnis: div.warning |
| selector-unify(selector1, selector2) | Kombiniert zwei Selektoren zu einem zusammengesetzten Selektor. Wenn die beiden Selektoren nicht kombiniert werden können, wird null zurückgegeben. Beispiel: selector-unify("myInput", ".disabled") Ergebnis: myInput.disabled selector-unify("p", "h1") Ergebnis: null |
| simple-selectors(selectors) | Zerlegt einen zusammengesetzten Selektor in einfache Selektoren. Beispiel: simple-selectors("div.myInput") Ergebnis: div, .myInput simple-selectors("div.myInput:before") Ergebnis: div, .myInput, :before |
Andere Erweiterungen