Sass Blog

Seite 1 von 9

  • Sass Farbräume & Wide Gamut Farben

    Gepostet am 11. September 2024 von Miriam Suzanne

    Wide Gamut Farben kommen zu Sass!

    Ich sollte das klarstellen. Wide Gamut CSS Farbformate wie oklch(...) und color(display-p3 ...) sind seit Mai 2023 in allen großen Browsern verfügbar. Aber schon davor waren diese neuen Farbformate in Sass *erlaubt*. Das ist eine meiner Lieblingseigenschaften von Sass: die meisten neuen CSS funktionieren einfach, ohne jegliche "offizielle" Unterstützung oder Updates. Wenn Sass unbekanntes CSS antrifft, gibt es diesen Code einfach an den Browser weiter. Nicht alles muss vorverarbeitet werden.

    Oft ist das alles, was wir brauchen. Als Cascade Layers und Container Queries in Browsern eingeführt wurden, gab es nichts weiter für Sass zu tun. Aber die neuen CSS Farbformate sind etwas anders. Da Farben ein erstklassiger Datentyp in Sass sind, wollen wir sie nicht immer *so wie sie sind* weitergeben. Wir wollen oft Farben manipulieren und verwalten, bevor sie zum Browser gelangen.

    Kennen Sie sich bereits mit Farbräumen aus? Springen Sie zu den neuen Sass-Funktionen!

    Der Kompromiss bei FarbformatenDer Farb…

  • Node Sass ist End-of-Life

    Gepostet am 24. Juli 2024 von Natalie Weizenbaum

    Die Zeit ist endlich gekommen, Node Sass in den Ruhestand zu versetzen. Dieser Node.js-Wrapper für LibSass war der erste offizielle Sass-Compiler, der im JavaScript-Ökosystem verfügbar war, und trug maßgeblich dazu bei, dass Sass über den Umfang der Ruby-Community hinauswuchs, wo er ursprünglich herkam. Er hat jedoch seit anderthalb Jahren keine neue Veröffentlichung mehr erhalten, und die jüngsten Maintainer haben nicht mehr die Bandbreite, um ihn weiter zu aktualisieren.

    Das npm-Paket wurde als veraltet markiert, und das GitHub-Repository wurde archiviert, um Verwirrung darüber zu vermeiden, welche Sass-Repositories noch entwickelt werden. Wenn Sie Node Sass noch verwenden, empfehlen wir Ihnen dringend, diese Gelegenheit zu nutzen, um stattdessen auf die primäre Implementierung, Dart Sass, umzusteigen.

    Die LibSass-Implementierung, die Node Sass verwendete, bleibt zwar veraltet, aber noch nicht End-of-Life, da ihr Maintainer Marcel Greter weiterhin gelegentliche Korrekturen vornimmt. Es gibt jedoch keine offiziell unterstützte Möglichkeit mehr, diese Implementierung von Node.js aus zu verwenden.

    Ich möchte diese Gelegenheit nutzen, um allen zu danken, die Node…

  • Ankündigung von `pkg:` Importern

    Gepostet am 16. Februar 2024 von Natalie Weizenbaum

    Vor mehreren Monaten haben wir Feedback zu einem Vorschlag für einen neuen Standard für Importer eingeholt, der Pakete von verschiedenen Paketmanagern über das gemeinsame `pkg:`-Schema sowie einen integrierten `pkg:`-Importer, der den Modulauflösungsalgorithmus von Node.js unterstützt, laden kann. Heute freue ich mich, Ihnen mitteilen zu können, dass dieses Feature in Dart Sass 1.71.0 veröffentlicht wurde!

    Sie müssen nicht mehr manuell `node_modules` zu Ihrer `loadPaths`-Option hinzufügen und sich Gedanken darüber machen, ob verschachtelte Pakete überhaupt funktionieren. Sie müssen keine `~`-Zeichen mehr zu Ihren URLs hinzufügen und die gesamte Portabilität aufgeben. Jetzt können Sie einfach `importers: [new NodePackageImporter()]` übergeben und `@use 'pkg:library'` schreiben, und es funktioniert sofort so, wie Sie es sich wünschen.

    Was ist ein `pkg:` Importer?Was ist ein pkg: Importer? Permalinksper link

    Betrachten Sie einen `pkg:` Importer wie eine Spezifikation, die jeder implementieren kann, indem er einen benutzerdefinierten Importer schreibt, der ein paar Regeln befolgt. Wir haben einen für den Modulalgorithmus von Node.js implementiert, aber Sie könnten einen implementieren, der Sass…

  • Bitte um Stellungnahme: Paket-Importer

    Gepostet am 26. September 2023 von James Stuckey Weber

    Sass-Benutzer müssen oft Stile aus einer Abhängigkeit verwenden, um ein bestehendes Theme anzupassen oder auf Styling-Utilities zuzugreifen. Historisch gesehen hat Sass keine standardisierte Methode für die Verwendung von Paketen aus Abhängigkeiten spezifiziert. Dies hat zu einer Vielzahl von domänenspezifischen Lösungen geführt, darunter das `~`-Präfix in Webpack und das Hinzufügen von `node_modules` zu `loadPaths`.

    Dies war ein häufiger Schwachpunkt und kann es schwierig machen, sich auf Abhängigkeiten zu verlassen. Es kann auch schwieriger sein, Ihr Projekt auf einen neuen Build-Prozess umzustellen.

    Paket-ImporterPaket-Importer Permalinksper link

    Wir schlagen einen neuen Typ von Importer vor, der es Benutzern ermöglicht, das `pkg:` URL-Schema zu verwenden, um Sass anzuweisen, die Abhängigkeits-URL anhand der Auflösungsstandards und -konventionen für eine bestimmte Umgebung aufzulösen.

    Um den größten Anwendungsfall abzudecken, schlagen wir einen integrierten Paket-Importer für das Node-Ökosystem vor. Unsere Empfehlung ist, dass Paketautoren einen `sass` bedingten Export für die Einstiegspunkte ihres Pakets in ihrer verteilten `package.json` definieren. Zum Beispiel eine `package.json`, die enthält:…

  • Sass im Browser

    Gepostet am 7. Juli 2023 von Natalie Weizenbaum

    Im Laufe der Lebenszeit von Sass haben wir gesehen, wie viele der von uns eingeführten Features im Browser übernommen wurden. CSS-Variablen, mathematische Funktionen und zuletzt Verschachtelung waren alle von Sass inspiriert. Aber das Ausführen von *Sass selbst* als Compiler im Browser war nie möglich ... bis jetzt.

    Mit der Veröffentlichung von Dart Sass 1.63 fügen wir dem `sass` npm-Paket offiziell Unterstützung für die direkte Ausführung im Browser hinzu. Ersteller von Playgrounds oder Web-IDEs müssen keine Serveraufrufe mehr tätigen, um ihr Sass zu kompilieren. Jetzt können Sie es einfach laden und direkt auf Ihrer eigenen Seite verwenden.

    Sie können es sogar jetzt schon ausprobieren! Öffnen Sie einfach Ihre Entwicklerkonsole und führen Sie dies aus

    const sass = await import('https://jspm.dev/sass');
sass.compileString('a {color: #663399}');

    Wie kann ich es sonst noch verwenden?Wie kann ich es sonst noch verwenden? Permalinksper link

    Wir haben unser Bestes getan, um sicherzustellen, dass Sass im Browser so nutzbar wie möglich ist. Es kann … sein

Nächste Seite