CSS, SCSS und Less

Visual Studio Code hat integrierte Unterstützung für die Bearbeitung von Stylesheets in CSS .css, SCSS .scss und Less .less. Darüber hinaus können Sie eine Erweiterung für erweiterte Funktionalität installieren.

Tipp: Klicken Sie auf eine Erweiterungs-Kachel oben, um die Beschreibung und Bewertungen zu lesen und zu entscheiden, welche Erweiterung am besten für Sie geeignet ist. Mehr erfahren Sie im Marketplace.

IntelliSense

VS Code unterstützt Selektoren, Eigenschaften und Werte. Verwenden Sie ⌃Space (Windows, Linux Ctrl+Space), um eine Liste kontextspezifischer Optionen zu erhalten.

Vorschläge enthalten umfangreiche Dokumentation, einschließlich einer Liste der Browser, die die Eigenschaft unterstützen. Um den vollständigen Beschreibungstext des ausgewählten Eintrags anzuzeigen, verwenden Sie ⌃Space (Windows, Linux Ctrl+Space).

Syntaxhervorhebung & Farbvorschau

Während Sie tippen, gibt es eine Syntaxhervorhebung sowie eine Vorschau von Farben im Kontext.

Das Klicken auf eine Farbvorschau öffnet den integrierten Farbwähler, der die Konfiguration von Farbton, Sättigung und Deckkraft unterstützt.

Tipp: Sie können zwischen verschiedenen Farbmodi wechseln, indem Sie auf die Farbbeschreibung am oberen Rand des Farbwählers klicken.

Sie können die Farbvorschauen von VS Code ausblenden, indem Sie die folgende Einstellung vornehmen

"editor.colorDecorators": false

Um sie nur für CSS, Less und SCSS zu deaktivieren, verwenden Sie

"[css]": {
    "editor.colorDecorators": false
}

Faltung (Code-Faltung)

Sie können Codeabschnitte mit den Falt-Symbolen in der Seitenleiste zwischen Zeilennummern und Zeilenanfang zusammenklappen. Faltbare Abschnitte sind für alle Deklarationen (z. B. Regelerklärungen) und für mehrzeilige Kommentare im Quellcode verfügbar.

Zusätzlich können Sie die folgenden Bereichsmarkierungen verwenden, um einen Faltbereich zu definieren: /*#region*/ und /*#endregion*/ in CSS/SCSS/Less oder // #region und // #endregion in SCSS/Less.

Wenn Sie lieber zur einzugs basierten Faltung für CSS, Less und SCSS wechseln möchten, verwenden Sie

"[css]": {
    "editor.foldingStrategy": "indentation"
},

Emmet-Snippets

Emmet-Abkürzungsunterstützung ist in VS Code integriert. Vorschläge werden zusammen mit anderen Vorschlägen und Snippets in der Auto-Vervollständigungsliste des Editors angezeigt.

Tipp: Sehen Sie sich den CSS-Abschnitt des Emmet-Spickzettels für gültige Abkürzungen an.

VS Code unterstützt auch benutzerdefinierte Snippets.

Syntaxprüfung & Linting

Es gibt Unterstützung für CSS-Version <= 2.1, Sass-Version <= 3.2 und Less-Version <= 2.3.

Hinweis: Sie können die standardmäßigen CSS-, Sass- oder Less-Validierungen von VS Code deaktivieren, indem Sie die entsprechende Benutzereinstellung oder Arbeitsbereichseinstellung .validate auf false setzen. Siehe Einstellungen.

"css.validate": false

Gehe zu Symbol in Datei

Sie können schnell zu einem relevanten CSS-Symbol in der aktuellen Datei navigieren, indem Sie ⇧⌘O (Windows, Linux Ctrl+Shift+O) drücken.

Hover-Infos

Das Überfahren eines Selektors oder einer Eigenschaft mit der Maus zeigt ein HTML-Snippet an, das von der CSS-Regel abgedeckt wird.

Gehe zu Deklaration und finde Referenzen

Dies wird für Sass- und Less-Variablen in derselben Datei unterstützt. CSS-Variablen gemäß dem Entwurf einer Standardisierungsvorschlag werden ebenfalls unterstützt.

Es gibt Sprung zur Definition für @import und url() Links in CSS, SCSS und Less.

CSS-Benutzerdefinierte Daten

Sie können die CSS-Unterstützung von VS Code über ein deklaratives benutzerdefiniertes Datenformat erweitern. Indem Sie css.customData auf eine Liste von JSON-Dateien im benutzerdefinierten Datenformat setzen, können Sie das Verständnis von VS Code für neue CSS-Eigenschaften, At-Direktiven, Pseudoklassen und Pseudo-Elemente verbessern. VS Code bietet dann Sprachunterstützung wie Abschluss & Hover-Informationen für die bereitgestellten Eigenschaften, At-Direktiven, Pseudoklassen und Pseudo-Elemente.

Sie können mehr über die Verwendung benutzerdefinierter Daten im vscode-custom-data Repository lesen.

Formatierung

Die CSS Languages Features-Erweiterung bietet auch einen Formatierer. Der Formatierer funktioniert mit CSS, LESS und SCSS. Er wird von der JS Beautify-Bibliothek implementiert und kommt mit den folgenden Einstellungen

• css.format.enable - CSS-Standardformatierer aktivieren/deaktivieren.
• css.format.newlineBetweenRules - Regelsätze durch eine Leerzeile trennen.
• css.format.newlineBetweenSelectors - Selektoren mit einer neuen Zeile trennen.
• css.format.spaceAroundSelectorSeparator - Sicherstellen eines Leerzeichens um Selektortrennzeichen '>', '+', '~' (z. B. a > b).

Dieselbe Einstellungen existieren auch für less und scss.

Sass und Less in CSS transpilieren

VS Code kann mit Sass- und Less-Transpilern über unseren integrierten Aufgaben-Runner integriert werden. Wir können dies verwenden, um .scss- oder .less-Dateien in .css-Dateien zu transpilieren. Lassen Sie uns die Transpilierung einer einfachen Sass/Less-Datei durchgehen.

Schritt 1: Installieren Sie einen Sass- oder Less-Transpiler

Für diese Anleitung verwenden wir entweder das sass- oder less-Node.js-Modul.

Hinweis: Wenn Sie Node.js und den npm-Paketmanager noch nicht installiert haben, müssen Sie dies für diese Anleitung tun. Installieren Sie Node.js für Ihre Plattform. Der Node Package Manager (npm) ist in der Node.js-Distribution enthalten. Sie müssen ein neues Terminal (Eingabeaufforderung) öffnen, damit npm in Ihrem PATH ist.

npm install -g sass less

Schritt 2: Erstellen Sie eine einfache Sass- oder Less-Datei

Öffnen Sie VS Code in einem leeren Ordner und erstellen Sie eine Datei styles.scss oder styles.less. Fügen Sie den folgenden Code in diese Datei ein

$padding: 6px;

nav {
  ul {
    margin: 0;
    padding: $padding;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: $padding 12px;
    text-decoration: none;
  }
}

Für die Less-Version der obigen Datei ändern Sie einfach $padding in @padding.

Hinweis: Dies ist ein sehr einfaches Beispiel, weshalb der Quellcode zwischen beiden Dateitypen fast identisch ist. In fortgeschritteneren Szenarien werden die Syntaxen und Konstrukte deutlich unterschiedlich sein.

Schritt 3: Erstellen Sie tasks.json

Der nächste Schritt ist die Einrichtung der Aufgabenkonfiguration. Führen Sie dazu Terminal > Aufgaben konfigurieren aus und klicken Sie auf tasks.json-Datei aus Vorlage erstellen. Wählen Sie im erscheinenden Dialog Andere aus.

Dadurch wird eine Beispiel-tasks.json-Datei im .vscode-Ordner des Arbeitsbereichs erstellt. Die ursprüngliche Version der Datei enthält ein Beispiel zum Ausführen eines beliebigen Befehls. Wir werden diese Konfiguration für die Transpilierung von Sass/Less ändern

// Sass configuration
{
  // See https://go.microsoft.com/fwlink/?LinkId=733558
  // for the documentation about the tasks.json format
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Sass Compile",
      "type": "shell",
      "command": "sass styles.scss styles.css",
      "group": "build"
    }
  ]
}

// Less configuration
{
  // See https://go.microsoft.com/fwlink/?LinkId=733558
  // for the documentation about the tasks.json format
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Less Compile",
      "type": "shell",
      "command": "lessc styles.less styles.css",
      "group": "build"
    }
  ]
}

Schritt 4: Führen Sie die Build-Aufgabe aus

Da dies der einzige Befehl in der Datei ist, können Sie ihn ausführen, indem Sie ⇧⌘B (Windows, Linux Ctrl+Shift+B) (Build-Aufgabe ausführen) drücken. Die Beispiel-Sass/Less-Datei sollte keine Kompilierungsprobleme aufweisen. Daher geschieht beim Ausführen der Aufgabe nur die Erstellung einer entsprechenden styles.css-Datei.

Da in komplexeren Umgebungen mehr als eine Build-Aufgabe vorhanden sein kann, werden Sie aufgefordert, die auszuführende Aufgabe auszuwählen, nachdem Sie ⇧⌘B (Windows, Linux Ctrl+Shift+B) (Build-Aufgabe ausführen) gedrückt haben. Außerdem können wir die Ausgabe nach Kompilierungsproblemen (Fehler und Warnungen) durchsuchen. Wählen Sie je nach Compiler einen geeigneten Eintrag in der Liste aus, um die Werkzeugausgabe nach Fehlern und Warnungen zu durchsuchen. Wenn Sie die Ausgabe nicht durchsuchen möchten, wählen Sie Build-Ausgabe niemals durchsuchen aus der angezeigten Liste.

An diesem Punkt sollten Sie eine zusätzliche Datei in der Dateiliste sehen: styles.css.

Wenn Sie die Aufgabe zur standardmäßigen Build-Aufgabe machen möchten, führen Sie Standard-Build-Aufgabe konfigurieren aus dem globalen Menü Terminal aus und wählen Sie die entsprechende Sass- oder Less-Aufgabe aus der angezeigten Liste aus.

Hinweis: Wenn Ihr Build fehlschlägt oder Sie eine Fehlermeldung wie "Ein Ausgabeverzeichnis muss angegeben werden, wenn ein Verzeichnis kompiliert wird" erhalten, stellen Sie sicher, dass die Dateinamen in Ihrer tasks.json mit den Dateinamen auf der Festplatte übereinstimmen. Sie können Ihren Build jederzeit testen, indem Sie sass styles.scss styles.css von der Kommandozeile aus ausführen.

Automatisierung der Sass/Less-Kompilierung

Lassen Sie uns die Dinge ein wenig weiter treiben und die Sass/Less-Kompilierung mit VS Code automatisieren. Wir können dies mit derselben Aufgaben-Runner-Integration wie zuvor tun, aber mit einigen Modifikationen.

Schritt 1: Gulp und einige Plugins installieren

Wir verwenden Gulp, um eine Aufgabe zu erstellen, die die Sass/Less-Kompilierung automatisiert. Wir verwenden auch das gulp-sass-Plugin, um die Dinge ein wenig einfacher zu machen. Das Less-Plugin ist gulp-less.

Wir müssen Gulp sowohl global (-g Schalter) als auch lokal installieren

npm install -g gulp
npm install gulp gulp-sass gulp-less

Hinweis: gulp-sass und gulp-less sind Gulp-Plugins für die sass- und lessc-Module, die wir zuvor verwendet haben. Es gibt viele andere Gulp Sass- und Less-Plugins, die Sie verwenden können, sowie Plugins für Grunt.

Sie können testen, ob Ihre Gulp-Installation erfolgreich war, indem Sie gulp -v im Terminal eingeben. Sie sollten eine Version sowohl für die globale (CLI) als auch für die lokale Installation sehen.

Schritt 2: Eine einfache Gulp-Aufgabe erstellen

Öffnen Sie VS Code im selben Ordner wie zuvor (enthält styles.scss/styles.less und tasks.json unter dem Ordner .vscode) und erstellen Sie gulpfile.js im Stammverzeichnis.

Fügen Sie den folgenden Code in die Datei gulpfile.js ein

// Sass configuration
var gulp = require('gulp');
var sass = require('gulp-sass')(require('sass'));

gulp.task('sass', function(cb) {
  gulp
    .src('*.scss')
    .pipe(sass())
    .pipe(
      gulp.dest(function(f) {
        return f.base;
      })
    );
  cb();
});

gulp.task(
  'default',
  gulp.series('sass', function(cb) {
    gulp.watch('*.scss', gulp.series('sass'));
    cb();
  })
);

// Less configuration
var gulp = require('gulp');
var less = require('gulp-less');

gulp.task('less', function(cb) {
  gulp
    .src('*.less')
    .pipe(less())
    .pipe(
      gulp.dest(function(f) {
        return f.base;
      })
    );
  cb();
});

gulp.task(
  'default',
  gulp.series('less', function(cb) {
    gulp.watch('*.less', gulp.series('less'));
    cb();
  })
);

Was passiert hier?

1. Unsere Gulp-Standardaufgabe default führt zuerst die sass- oder less-Aufgabe einmal beim Start aus.
2. Anschließend überwacht sie Änderungen an jeder SCSS/Less-Datei im Stammverzeichnis unseres Arbeitsbereichs, z. B. des aktuell in VS Code geöffneten Ordners.
3. Sie nimmt die Gruppe von SCSS/Less-Dateien, die sich geändert haben, und verarbeitet sie durch unseren jeweiligen Compiler, z. B. gulp-sass, gulp-less.
4. Wir haben nun eine Gruppe von CSS-Dateien, die jeweils nach ihrer ursprünglichen SCSS/Less-Datei benannt sind. Anschließend legen wir diese Dateien im selben Verzeichnis ab.

Schritt 3: Führen Sie die Gulp-Standardaufgabe aus

Um die Aufgabenintegration mit VS Code abzuschließen, müssen wir die vorherige Aufgabenkonfiguration ändern, um die gerade erstellte Gulp-Standardaufgabe auszuführen. Sie können entweder die Datei tasks.json löschen oder sie leeren und nur die Eigenschaft "version": "2.0.0" beibehalten. Führen Sie nun Aufgabe ausführen aus dem globalen Menü Terminal aus. Beobachten Sie, dass Ihnen ein Auswahlfenster mit den im Gulp-File definierten Aufgaben angezeigt wird. Wählen Sie gulp: default aus, um die Aufgabe zu starten. Wir erlauben Ihnen, die Ausgabe nach Kompilierungsproblemen zu durchsuchen. Wählen Sie je nach Compiler einen geeigneten Eintrag in der Liste aus, um die Werkzeugausgabe nach Fehlern und Warnungen zu durchsuchen. Wenn Sie die Ausgabe nicht durchsuchen möchten, wählen Sie Build-Ausgabe niemals durchsuchen aus der angezeigten Liste. An diesem Punkt, wenn Sie Less- oder SASS-Dateien erstellen und/oder ändern, sehen Sie, dass die entsprechenden CSS-Dateien generiert werden und/oder Änderungen beim Speichern reflektiert werden. Sie können auch automatisches Speichern aktivieren, um die Dinge noch reibungsloser zu gestalten.

Wenn Sie die Aufgabe gulp: default zur standardmäßigen Build-Aufgabe machen möchten, die beim Drücken von ⇧⌘B (Windows, Linux Ctrl+Shift+B) ausgeführt wird, führen Sie Standard-Build-Aufgabe konfigurieren aus dem globalen Menü Terminal aus und wählen Sie gulp: default aus der angezeigten Liste.

Schritt 4: Beenden Sie die Gulp-Standardaufgabe

Die Aufgabe gulp: default läuft im Hintergrund und überwacht Dateiänderungen an Sass/Less-Dateien. Wenn Sie die Aufgabe beenden möchten, können Sie Aufgabe beenden aus dem globalen Menü Terminal verwenden.

Anpassung von CSS-, SCSS- und Less-Einstellungen

Sie können die folgenden Lint-Warnungen als Benutzer- und Arbeitsbereichseinstellungen konfigurieren.

Die Einstellung validate ermöglicht es Ihnen, die integrierte Validierung auszuschalten. Dies würden Sie tun, wenn Sie lieber einen anderen Linter verwenden möchten.

Um eine Option für CSS zu konfigurieren, verwenden Sie css.lint. als Präfix für die ID; für SCSS und Less verwenden Sie scss.lint. und less.lint..

Setzen Sie eine Einstellung auf warning oder error, wenn Sie die Lint-Überprüfung aktivieren möchten. Verwenden Sie ignore, um sie zu deaktivieren. Lint-Prüfungen werden während der Eingabe durchgeführt.

Nächste Schritte

Lesen Sie weiter, um mehr über Folgendes zu erfahren:

• Aufgaben konfigurieren - Vertiefen Sie sich in Aufgaben, um Ihnen bei der Transpilierung Ihres SCSS und Less in CSS zu helfen.
• Grundlegende Bearbeitung – Erfahren Sie mehr über den leistungsstarken VS Code-Editor.
• Code-Navigation – Schnelles Bewegen durch Ihren Quellcode.
• HTML - CSS ist nur der Anfang, HTML wird in VS Code auch sehr gut unterstützt.

Häufig gestellte Fragen

Bietet VS Code einen Farbwähler?

Ja, überfahren Sie eine CSS-Farbreferenz mit der Maus und der Farbwähler wird angezeigt.

Gibt es Unterstützung für die einzugsbasierte Sass-Syntax (.sass)?

Nein, aber es gibt mehrere Erweiterungen im Marketplace, die die eingerückte Sass-Variante unterstützen, z. B. die Sass-Erweiterung, die ursprünglich von Robin Bentley erstellt und nun von Leonard Grosoli betreut wird.