Feature Watch: CSS-Importe und CSS Kompatibilität

Dart Sass 1.11 wurde gerade veröffentlicht, und damit eine Handvoll neuer Funktionen. Dies ist ein aufregender Moment, da es die erste wichtige neue Funktion markiert, die seit der Einführung von Dart Sass in die Sprache aufgenommen wurde. Es ist auch die erste Version mit Funktionen, die den neuen Prozess durchlaufen haben, von Vorschlag über Tests bis hin zur Implementierung.

CSS-ImporteCSS-Importe Permalink

Die größte Funktion in Dart Sass 1.11 ist die Unterstützung für den Import von einfachen CSS-Dateien. Dies ist eine lang erwartete Funktion, und obwohl wir ursprünglich vorhatten, darauf zu warten, bis wir das kommende Modulsystem einführen, haben wir uns entschieden, sie früher zu implementieren.

Sie können jetzt eine CSS-Datei, sagen wir styles.css, importieren, indem Sie einfach @import "styles" schreiben. Diese Datei wird als einfaches CSS geparst, was bedeutet, dass alle Sass-Funktionen wie Variablen oder Mixins oder Interpolation nicht erlaubt sind. Das darin definierte CSS wird Teil Ihres Stylesheets und kann genauso wie jeder andere Stil mit @extend erweitert werden.

Es gibt ein paar Einschränkungen: Da SCSS eine Obermenge von einfachem CSS ist, wird @import "styles.css" (mit expliziter Erweiterung) weiterhin in eine CSS @import-Regel kompiliert. Wenn Sie eine CSS-Datei in Ihre Sass-Kompilierung importieren möchten, müssen Sie die Erweiterung weglassen.

Außerdem ist diese Funktion in LibSass noch nicht vollständig implementiert. Es behält sein altes Verhalten bei, bei dem es CSS-Dateien importiert, sie aber als SCSS parst, wobei alle zusätzlichen Sass-Funktionen erlaubt sind. Dieses Verhalten wird bald als veraltet markiert und wird schließlich Fehler für alles außer einfachem CSS erzeugen, genau wie Dart Sass es heute tut.

CSS min() und max()CSS min() und max() Permalink

Dart Sass 1.11 fügt auch die Unterstützung für die mathematischen CSS-Funktionen min() und max() hinzu. Für diejenigen, die damit nicht vertraut sind, funktionieren diese Funktionen ähnlich wie calc(), mit dem Unterschied, dass sie das Minimum oder Maximum einer Reihe von Werten zurückgeben. Zum Beispiel können Sie width: max(50%, 100px) schreiben, um Ihr Element entweder 50 % der Breite des Elternelements oder 100 Pixel breit zu machen, je nachdem, was größer ist.

Da Sass eigene Funktionen namens min() und max() hat, war es schwierig, diese CSS-Funktionen zu verwenden... bis jetzt. Dart Sass 1.11 entscheidet intelligent, ob die einfachen CSS-Funktionen oder die integrierten Sass-Funktionen verwendet werden sollen, je nachdem, ob Sie dynamische Sass-Werte übergeben oder nicht. Zum Beispiel

• Die Sass-Funktion wird aufgerufen, wenn Sie eine Variable übergeben, z. B. max($width, 100px).
• Die Sass-Funktion wird aufgerufen, wenn Sie eine andere Sass-Funktion aufrufen, z. B. max(compute-width(), 100px).
• Es wird zu einer einfachen CSS-Funktion kompiliert, wenn Sie nur einfache CSS-Zahlen verwenden, z. B. max(50% + 10px, 100px).
• Es wird weiterhin zu einer einfachen CSS-Funktion kompiliert, auch wenn Sie Interpolation verwenden, z. B. max(50% + #{$width / 2}, #{$width}).

Dies bewahrt die Abwärtskompatibilität mit bestehenden Verwendungen der Sass-Funktionen und ermöglicht es den Benutzern gleichzeitig, die CSS-Funktionen genauso zu verwenden, wie sie es in einfachem CSS tun würden.

Diese Funktion ist in LibSass oder Ruby Sass noch nicht implementiert.

Bereichsformatierte Media QueriesBereichsformatierte Media Queries Permalink

CSS Media Queries Level 4 definiert eine Bereichssyntax für die Definition bestimmter Medien- Abfragen.

@media (width > 500px) {
  /* ... */
}

Dart Sass 1.11 fügt Unterstützung für diese Syntax hinzu. Sie funktioniert genau wie die bestehende Unterstützung für Media Queries: Sie können entweder Interpolation oder einfache Sass-Ausdrücke verwenden, um Sass-Logik in die Abfrage einzufügen, und sie können immer noch verschachtelt werden.

@media (width > $width) {
  @media (height < #{$height}) {
    /* ... */
  }
}

Diese Funktion ist in LibSass oder Ruby Sass noch nicht implementiert.

Normalisierte Bezeichner-EscapesNormalisierte Bezeichner-Escapes Permalink

Die letzte Kompatibilitätsverbesserung ist ein kleiner Sonderfall, aber es lohnt sich dennoch zu erwähnen: Die Art und Weise, wie Sass Escapes in Bezeichnern parst, wurde verbessert, um besser mit der CSS- Spezifikation übereinzustimmen.

Escapes werden jetzt in ein Standardformat normalisiert, was bedeutet, dass (zum Beispiel) éclair und \E9clair zum selben Wert geparst werden (in diesem Fall éclair). Vor dieser Änderung würde ein Escape, wenn er geschrieben wurde, immer unverändert übernommen werden, sodass str-length(\E9clair) 8 zurückgeben würde, obwohl dieser Bezeichner für CSS genau dasselbe bedeutet wie éclair.

Wir gehen nicht davon aus, dass dies viele Benutzer betrifft, aber wir bemühen uns stets, Sass so nah wie möglich an die Semantik von CSS zu bringen. Dies ist ein kleiner, aber wichtiger Schritt auf diesem Weg.

Diese Funktion ist in LibSass oder Ruby Sass noch nicht implementiert.