Ubuntu 16.04 / Sass installieren

Um das veraltete Ruby Sass unter Ubuntu 16.04 zu installieren, können Sie das ruby-sass-Paket von APT oder das sass-Gem von RubyGems verwenden. Allerdings ist Ruby Sass eine eingestellte Implementierung, daher sollte es nur in Betracht gezogen werden, wenn bestehende Projekte reproduziert werden. Für neue Entwicklungsumgebungen verwenden Sie ein aktuell unterstütztes Betriebssystem und Dart Sass. Die Installation über gem installiert ebenfalls nicht die neueste Dart Sass-Version.

Überprüfen Sie die Implementierung und die Unterstützung des Betriebssystems vor der Installation

Sass ist ein Werkzeug, das Stylesheets, die mit Variablen und verschachtelten Regeln geschrieben wurden, in CSS (Cascading Style Sheets) umwandelt. SCSS ist eine Sass-Syntax, die CSS ähnelt und geschweifte Klammern verwendet, und die Dateiendung ist .scss. Selbst mit demselben Befehlsnamen sass sind Ruby Sass und Dart Sass unterschiedliche Implementierungen.

Laut dem offiziellen Sass-Leitfaden endete der Support für Ruby Sass im Jahr 2019. Ubuntu 16.04 hat ebenfalls sowohl seinen Standard-Support als auch die Erweiterte Sicherheitswartung (ESM) beendet, und Stand Oktober 2026 erfordert zusätzlicher Sicherheitssupport die Überprüfung der Bedingungen des Legacy-Add-on-Dienstes von Ubuntu Pro. Der Umfang des Betriebssystem-Supports ist in Canonicals Ubuntu 16.04 Leitfaden zu finden.

Sichern Sie zunächst Ihren Quellcode und das vorhandene CSS und überprüfen Sie die Implementierungen und Versionen, die im Projekt in Gemfile.lock, package.json usw. verwendet werden. Die beiden alten Installationsmethoden unten sind Alternativen, daher ist es nicht notwendig, beide zu installieren.

Installieren Sie das veraltete Ruby Sass mit APT

Um das auf Ubuntu 16.04 verwendete Distributionspaket zu reproduzieren, überprüfen Sie im Terminal in folgender Reihenfolge. Sie benötigen ein Konto, das sudo ausführen kann, und Zugriff auf ein APT-Repository, das ordnungsgemäß funktioniert.

sudo apt update
apt-cache policy ruby-sass
sudo apt install ruby-sass
sass --version

Das Candidate-Feld in apt-cache policy zeigt die für die Installation ausgewählte Paketversion an. Wenn keine Kandidaten vorhanden sind oder das Update fehlschlägt, gehen Sie nicht davon aus, dass die Installation möglich ist; überprüfen Sie zunächst die Repository-Einstellungen, das Netzwerk und den Supportstatus der Umgebung. Fügen Sie nicht willkürlich ein Repository hinzu oder deaktivieren Sie die Signaturprüfung nur, weil ein Paket nicht gefunden werden kann.

Nach der Installation sollte die Sass-Version angezeigt werden. Die Version des Distributionspakets kann von der Gem-Version abweichen, und Sass 3.4.23 (Selective Steve) aus vorherigen Beiträgen ist ein Beispiel für eine frühere Ausgabe. Das aktuelle Installationsergebnis muss nicht unbedingt mit diesem String übereinstimmen.

Installieren Sie die erforderliche Legacy-Version mit RubyGems

Diese Methode kommt infrage, wenn ein bestehendes Projekt das Ruby-Sass-Gem benötigt. Unten ist ein Beispiel angegeben, das 3.7.4 spezifiziert, und wenn das Projekt eine andere Version benötigt, hat diese Anforderung Vorrang. Die Informationen zu Sass 3.7.4 bei RubyGems zeigen an, dass Ruby 2.0.0 oder höher erforderlich ist, aber diese Bedingung allein bedeutet nicht, dass alle abhängigen Gems auf älteren Ruby-Versionen installiert werden können.

sudo apt update
sudo apt install ruby
ruby --version
gem --version
gem install --user-install sass -v 3.7.4 --no-document

--user-install ist eine Option, es im Benutzer-Gem-Verzeichnis anstelle des systemweiten Verzeichnisses zu installieren. Wenn eine Warnung angezeigt wird, dass die ausführbare Datei nicht gefunden werden kann, folgen Sie dem RubyGems Benutzerinstallationshandbuch und fügen Sie das bin des Verzeichnisses zu Ihrem PATH hinzu. In Bash können Sie den folgenden Befehl auf Ihr aktuelles Terminal anwenden und anschließend überprüfen.

export PATH="$(ruby -r rubygems -e 'print Gem.user_dir')/bin:$PATH"
sass --version

Wenn dies eine Einstellung ist, die Sie weiterhin verwenden werden, fügen Sie die obige export-Zeile einmal zu ~/.bashrc hinzu und überprüfen Sie sie in einem neuen Terminal. Um dies rückgängig zu machen, entfernen Sie die hinzugefügte Zeile und öffnen Sie das Terminal erneut. Wenn die Installation fehlschlägt, überprüfen Sie die abhängigen Gems und die in der Fehlermeldung angezeigte Ruby-Version und reproduzieren Sie die Umgebung basierend auf der in dem Projekt gespeicherten Lock-Datei und der damaligen Umgebung. Deaktivieren Sie die HTTPS-Prüfung nicht, um Zertifikats- oder TLS-Fehler zu beheben.

Überprüfen Sie die Installation, indem Sie SCSS in CSS konvertieren

Nur die Version auszugeben bestätigt nicht die tatsächliche Konvertierung. Erstellen Sie in einem separaten leeren Arbeitsordner eine style.scss-Datei und speichern Sie den gesamten untenstehenden Inhalt. In einem Ordner mit bereits vorhandenen Dateien stellen Sie zunächst sicher, dass es keine Konflikte mit vorhandenen Beispieldateinamen gibt.

$brand: #336699;

.notice {
  color: $brand;
  strong {
    font-weight: 700;
  }
}

Das Ausführen des folgenden Befehls in diesem Ordner erzeugt style.css.

sass style.scss style.css

Das generierte CSS sollte die unten aufgeführten Selektoren und Werte enthalten. Abhängig von der Implementierung und den Einstellungen für das Ausgabeformat können Leerzeichen, Zeilenumbrüche oder Source-Map-Kommentare variieren.

.notice {
  color: #336699;
}

.notice strong {
  font-weight: 700;
}

Ändern Sie die Farbwerte und konvertieren Sie erneut, um zu sehen, ob sich die Werte im CSS ändern, wodurch die Beziehung zwischen den Eingabe- und Ausgabedateien bestätigt wird. Das Zurücksetzen auf die ursprünglichen Werte und erneutes Ausführen stellt den Beispielzustand wieder her. Die Sass-Konvertierung ist der Prozess der Erstellung von CSS-Dateien, und um sie auf einer Webseite anzuwenden, müssen Sie das Ausgabe-CSS im entsprechenden HTML laden.

Wenn Befehle in Konflikt stehen oder die Installation zurückgesetzt werden muss

Wenn sass: command not found nach der Installation erscheint, überprüfen Sie, ob die Installation erfolgreich war, und prüfen Sie den PATH. Wenn eine andere Version erscheint als erwartet, sehen Sie nach, welches ausführbare Programm zuerst ausgewählt wird – ob über APT, den Benutzer-Gem oder ein anderes Tool installiert.

command -v sass
type -a sass
sass --version

Das Voranstellen des Benutzer-Gem-Verzeichnisses bin im PATH kann diesem Befehl Priorität geben. In Umgebungen mit doppelten Installationen über APT und Gem sollten Sie nicht nur die Versionsnummer betrachten; notieren Sie auch den Pfad. Anstatt Dateien willkürlich zu löschen, entfernen Sie sie über das Verwaltungstool, das für die Installation verwendet wurde.

• Um eine APT-Installation rückgängig zu machen, verwenden Sie sudo apt remove ruby-sass. Lesen Sie vor dem Ausführen die Liste der zu entfernenden Elemente und stellen Sie sicher, dass sie von anderen Projekten nicht verwendet werden.
• Um das Benutzer-Gem im obigen Beispiel zu entfernen, verwenden Sie gem uninstall --user-install sass -v 3.7.4. Es ist nicht notwendig, andere Versionen oder gemeinsam genutzte Abhängigkeiten en masse zu entfernen.
• Wenn der Fehler durch inkompatible moderne SCSS-Syntax verursacht wird, kann eine einfache Neuinstallation das Problem möglicherweise nicht lösen. Bauen Sie mit der vom Projekt benötigten Implementierung, oder überprüfen Sie den Code, um auf Dart Sass umzusteigen.

Wechseln Sie in einer neuen Umgebung zu Dart Sass

Die aktuelle Referenzimplementierung von Sass ist Dart Sass. Die offizielle Installationsdokumentation leitet Sie an, eine eigenständige Distribution oder eine npm-Installation zu installieren, die für Ihr Betriebssystem und Ihre CPU geeignet ist. Das npm-Beispiel in diesem Abschnitt setzt eine separate Entwicklungsumgebung mit einem unterstützten Betriebssystem und einer für die Sass-Version geeigneten Node.js-Version voraus. Die Ausführung mit dem standardmäßigen Node.js von Ubuntu 16.04 wird nicht vorausgesetzt.

Sobald Node.js und npm bereit sind, können Sie projektspezifische Entwicklungsabhängigkeiten in einem neuen Projektordner mit folgendem Befehl installieren. Bei der Anwendung auf ein bestehendes Projekt sichern Sie zuerst package.json und die Sperrdatei, und prüfen Sie dann die vorhandenen Build-Einstellungen.

npm init -y
npm install --save-dev sass
npx sass --version
npx sass style.scss style.css

Bevor Sie den letzten Befehl ausführen, müssen Sie das style.scss des vorherigen Abschnitts im selben Ordner speichern. npx sass verwendet den projektspezifischen Sass, der durch dieses Verfahren installiert wurde, und kann sich vom globalen sass-Befehl und der Version unterscheiden. Sie können das Installationsergebnis mit npm ls sass und dem generierten CSS überprüfen. Die in diesem Beispiel hinzugefügten Entwicklungsabhängigkeiten können mit npm uninstall --save-dev sass entfernt werden.

Beim Übertragen eines alten Projekts vergleichen Sie die Konversionsergebnisse auf einem Test-Branch oder einer Kopie und überprüfen CSS-Unterschiede und Warnungen, bevor Sie sie anwenden. Sie können den Befehl und die Optionen für die Einzeldateikonversion in der Dokumentation der Dart-Sass-Befehlszeile nachsehen. Die Installation von Ruby Sass und der Wechsel zum aktuellen Dart Sass sind separate Aufgaben.