Viele neue Verbesserungen im nativen CSS, wie beispielsweise Variablen und Verschachtelungen, machen den Einsatz von Präprozessoren wie SCSS (nahezu) überflüssig.
Es ist also höchste Zeit für eine Auslegeordung. Benennen wir die bisherigen Hürden und zeigen Lösungswege für eine Migration von SCSS auf CSS auf.
Die meisten Variablen können 1:1 von SCSS nach CSS migriert werden.
$alertColor: red;
.alert {
color: $alertColor;
}
--alertColor: red;
.alert {
color: var(--alertColor);
}
Native CSS-Variblen werden im HTML gerendert, wodruch sie direkt im Frontend manipulierbar sind. Manche SCSS-Mixins werden dadurch überflüssig.
Bereits seit Mitte 2017 funktionieren diese nativen Variablen auf den wichtigsten Browserversionen.
Das im SCSS beliebte Nesting funktioniert unterdessen genau gleich im CSS.
div {
color: red;
&.blue {
color: blue;
}
span {
background-color: yellow;
}
}
Seit Ende 2023 funktionieren diese nativen Verschachtelungen auf den wichtigsten Browserversionen. Samsung Internet hat noch Probleme bei verschachtelten Rules.
SCSS Mixins sind auf verschiedene Arten ersetzbar.
Pseudoklasse :has()
Manche Mixins wurden aus Ermangelung eines Parent-Selectors erstellt. Dieser Workarround ist mit der :has() Pseudoklasse überflüssig geworden.
@mixin fixSpace() {
margin: -4px;
padding: 4px;
}
.box-teaser {
margin: 4px;
div {
@include fixSpace();
}
}
.box-teaser {
margin: 4px;
&:has(div) {
margin: 0;
}
div {
padding: 4px;
}
}
Variablen in Queries
Manche Mixins wurden gebildet, damit unterschiedliche Variablen abhängig von Media- und Container-Queries gesetz werden können. Native Variablen sind client-seitig sicht- und manipulierbar, weswegen solche Mixins gar nicht mehr benötigt werden.
$default-color: #63452C;
$default1-color: #123456;
$default2-color: #123456;
@mixin dark {
@media (prefers-color-scheme: dark) {
$default1-color: #654321;
$default2-color: #654321;
}
}
html {
@include dark;
}
:root {
--default-color: #63452C;
--default1-color: color-mix(in srgb, var(--default-color), white 40%);
--default2-color: color-mix(in srgb, var(--default-color), white 80%);
@media (prefers-color-scheme: dark) {
--default1-color: color-mix(in srgb, var(--default-color), black 50%);
--default2-color: color-mix(in srgb, var(--default-color), black 75%);
}
}
Pseudoelement ::part()
Das Pseudoelement ::part() richtet sich nach dem globalen Attribut part. Manche Mixins wurden gebildet, weil die eigentlich längst verfügbare part-Lösung unbekannt blieb. Das Besondere an der part-Lösung ist, dass man damit auch in einen Shadow DOM einwirken kann, was die SCSS-Alternativen nicht bieten können.
@mixin line() {
border-bottom: 1px solid black;
padding-bottom: 4px;
}
.box-teaser {
margin-bottom: 4px;
@include line();
}
::part(line) {
border-bottom: 1px solid black;
padding-bottom: 4px;
}
.box-teaser[part=line] {
margin-bottom: 4px;
}
@property Rolle
Die CSS-At-Regel @property ist Teil der CSS-Houdini-APIs. Sie ermöglicht es Entwicklern, ihre benutzerdefinierten CSS-Eigenschaften explizit zu definieren, indem sie die Überprüfung und Einschränkung von Eigenschaftstypen ermöglicht, Standardwerte festlegt und definiert, ob eine benutzerdefinierte Eigenschaft Werte erben kann oder nicht.
Die @property-Regel stellt eine benutzerdefinierte Eigenschaftsregistrierung direkt in einem Stylesheet dar, ohne dass Javascript ausgeführt werden muss. Gültige @property-Regeln führen zu einer registrierten benutzerdefinierten Eigenschaft, als ob registerProperty() mit entsprechenden Parametern aufgerufen worden wäre.
@property --item-size {
syntax: "";
inherits: true;
initial-value: 40%;
}
.item {
width: var(--item-size);
height: var(--item-size);
}
Funktionen in SCSS werden oftmals für Berechnungen verwendet. Hierfür können die CSS-Math-Funktionen, wie min(), max(), clamp(), calc() und viele weitere, genutzt werden.
Schlaufen können oftmals mit nth-child() ersetzt werden.
@each $key in $keys {
$foo: $key;
}
div:nth-child(odd) {
--foo: var(--key);
}
Du hast es geschafft. Abonniere meine Benachrichtigungen, um weitere News und Anleitungen von mir zu erhalten.