Feature Watch: Content-Argumente und Farbfunktionen

Dart Sass 1.15, das heute veröffentlicht wurde und auf npm und allen anderen Distributionskanälen verfügbar ist, bringt eine Reihe mit Spannung erwarteter neuer Sass-Funktionen mit sich. Dies ist auch die erste Veröffentlichung von Dart Sass mit wichtigen neuen Sprachfunktionen, die *nicht* nur für CSS-Kompatibilität gedacht sind. Das ist eine große Leistung, und wir beabsichtigen, dieses Muster auch weiterhin fortzusetzen!

@content-Argumente@content-Argumente Permalink

Mixins, die @content-Blöcke akzeptieren, können diesen Blöcken jetzt Argumente übergeben. Dies wird mit @content(<argumente...>) geschrieben. Wenn ein Mixin Argumente an seinen Content-Block übergibt, müssen Benutzer dieses Mixins diese Argumente akzeptieren, indem sie @include <name> using (<argumente...>) schreiben. Die Argumentenliste für einen Content-Block funktioniert genauso wie die Argumentenliste eines Mixins, und die Argumente, die ihm von @content übergeben werden, funktionieren genauso wie die Übergabe von Argumenten an einen Mixin.

// style.scss
@mixin media($types...) {
  @each $type in $types {
    @media #{$type} {
      @content($type);
    }
  }
}

@include media(screen, print) using ($type) {
  h1 {
    font-size: 40px;
    @if $type == print {
      font-family: Calluna;
    }
  }
}

/* style.css */
@media screen {
  h1 {
    font-size: 40px;
  }
}
@media print {
  h1 {
    font-size: 40px;
    font-family: Calluna;
  }
}

Weitere Details finden Sie im Feature-Vorschlag. Dieses Feature ist in LibSass implementiert und wird in Version 3.6.0 veröffentlicht. Da Ruby Sass veraltet ist und dies keine CSS-Kompatibilitätsfunktion ist, wird es nicht in Ruby Sass implementiert.

Farbe Level 4 Syntax für rgb() und hsl()Farbe Level 4 Syntax für rgb() und hsl()  Permalink

Das CSS Color Module Level 4 hat eine neue Syntax für die Funktionen rgb() und hsl() eingeführt, die von Browsern zunehmend unterstützt wird. Diese Syntax macht diese Funktionen kompakter, ermöglicht die Angabe des Alphawerts ohne zusätzliche rgba() und hsla() Funktionen, und sieht aus wie rgb(0 255 0 / 0.5) und hsla(0 100% 50%).

Zur Unterstützung dieser Funktion akzeptieren die Sass-Funktionen rgb() und hsl() jetzt eine durch Leerzeichen getrennte Liste von Komponenten als einzelnes Argument. Wenn dieses letzte Argument ein durch Schrägstrich getrenntes Zahlenpaar ist, wird die erste Zahl als Blaukanal bzw. Helligkeit und die zweite als Alpha-Kanal behandelt.

Beachten Sie jedoch, dass die normalen Regeln zum Auflösen von Division und / als Trennzeichen weiterhin gelten! Wenn Sie also eine Variable für den Alphawert übergeben möchten, müssen Sie die alte rgba()-Syntax verwenden. Wir erwägen mögliche langfristige Lösungen für dieses Problem, da / in CSS immer häufiger als Trennzeichen verwendet wird.

Darüber hinaus definiert die neue Farbspezifikation die Funktionen rgba() und hsla() als reine Aliase für rgb() und hsl() und fügt auch die Unterstützung für die Vier-Argumente-Syntax von rgba() und hsla() zu rgb() und hsl() hinzu. Um dieses Verhalten nachzubilden, definiert Sass auch rgba() und hsla() als Aliase und fügt die Unterstützung für alle ihre Definitionen zu rgb() und hsl() hinzu.

Alles in allem bedeutet dies, dass Funktionsaufrufe wie die folgenden neu in Sass unterstützt werden:

• rgb(0 255 0), rgb(0% 100% 0%), rgb(0 255 0 / 0.5) und rgb(0, 255, 0, 0.5);
• hsl(0 100% 50%), hsl(0 100% 50% / 0.5) und hsl(0, 100%, 50%, 0.5);
• rgba(0, 255, 0) und hsla(0, 100%, 50%);
• und rgb($color, 0.5).

Diese Änderung ist vollständig abwärtskompatibel, sodass alle Argumente für rgb(), hsl(), rgba() und hsla(), die zuvor funktionierten, weiterhin funktionieren werden.

Weitere Details finden Sie im Feature-Vorschlag. Dieses Feature ist noch nicht in LibSass oder Ruby Sass implementiert.

Interpolierte At-Rule-NamenInterpolierte At-Rule-Namen  Permalink

Diese Funktion ist etwas kleiner als die beiden letzten, aber sie steht noch länger auf der To-do-Liste: Unterstützung für Interpolation in den Namen von At-Rules hinzufügen! Das funktioniert genau so, wie Sie es erwarten würden.

@mixin viewport($prefixes) {
  @each $prefix in $prefixes {
    @-#{$prefix}-viewport {
      @content;
    }
  }
  @viewport {
    @content;
  }
}

Weitere Details finden Sie im Feature-Vorschlag. Dieses Feature ist noch nicht in LibSass implementiert. Da Ruby Sass veraltet ist und dies keine CSS-Kompatibilitätsfunktion ist, wird es nicht in Ruby Sass implementiert.