Sass-Installation

In diesem Kapitel stellen wir hauptsächlich die Installation und Verwendung von Sass vor.

NPM-Installation

Wir können npm (Einführung in die NPM-Nutzung) verwenden, um Sass zu installieren.

npm install -g sass

Hinweis:Für Nutzer in China wird empfohlen, den Taobao-Mirror zu verwenden, um npm zu installieren, siehe:Lösung für das Problem des langsamen NPM in China

Installation unter Windows

Wir können den Windows-PaketmanagerChocolateyzum Installieren verwenden:

choco install sass

Installation unter Mac OS X (Homebrew)

Mac OS kann denHomebrew-Paketmanager verwenden, um zu installieren:

brew install sass/sass/sass

Weitere Installationsmethoden finden Sie auf der offiziellen Website:https://sass-lang.com/install

Einführung in die Verwendung

Unser Tutorial verwendet Sass, das über npm installiert wurde. Nach der Installation können Sie die Version überprüfen:

$ sass --version 1.22.12 kompiliert mit dart2js 2.5.0 Als Nächstes erstellen wir eine example-test.scss-Datei mit dem folgenden Inhalt:

Code der Datei example-test.scss:

/* Variablen und Werte definieren */
$bgcolor: lightblue;
$textcolor: darkblue;
$fontsize: 18px;

/* Variablen verwenden */
body {
background-color: $bgcolor;
color: $textcolor;
font-size: $fontsize;
}

Geben Sie dann den folgenden Befehl in der Befehlszeile ein, um die .scss-Datei in CSS-Code umzuwandeln:

$ sass example-test.scss 
@charset "UTF-8";
/* 定义变量与值 */
/* 使用变量 */
body {
  background-color: lightblue;
  color: darkblue;
  font-size: 18px;
}

Sie können danach einen .css-Dateinamen angeben, um den Code in einer Datei zu speichern:

$ sass example-test.scss example-test.css

Dadurch wird eine example-test.css-Datei im aktuellen Verzeichnis mit dem folgenden Code erzeugt:

@charset "UTF-8";
/* 定义变量与值 */
/* 使用变量 */
body {
  background-color: lightblue;
  color: darkblue;
  font-size: 18px;
}

/*# sourceMappingURL=example-test.css.map */

Andere Erweiterungen