sass Tutorial
Erste Schritte mit Sass

Bemerkungen

Versionen

Konfiguration

Bei der Verwendung von SASS gibt es mehrere Möglichkeiten, Ihren Arbeitsbereich einzurichten. Einige Leute ziehen es vor, Befehlszeilentools zu verwenden (wahrscheinlich Linux-Leute), andere bevorzugen GUI-Anwendungen. Ich werde beide behandeln.

Befehlszeilen-Tools

Die 'Install sass-lang.com -Seite bei sass-lang.com behandelt dies ziemlich gut. Sie können SASS mit Ruby verwenden (das von einem Linux-Paketmanager installiert werden kann, oder Sie können das Installationsprogramm unter Windows herunterladen ). Bei macOS ist Ruby vorinstalliert.

Nachdem Sie Ruby installiert haben, müssen Sie SASS installieren (in manchen Fällen ist sudo möglicherweise nicht erforderlich):

sudo gem install sass

Zum Schluss können Sie überprüfen, ob Sie SASS mit sass -v installiert sass -v .

GUI-Anwendungen

Während es eine Reihe von GUI-Anwendungen gibt, die Sie verwenden können, empfehle ich Scout-App . Es erstellt und komprimiert Ihre CSS-Dateien automatisch, speichert Dateien und unterstützt MacOS, Windows und Linux.

Variablen

Wenn Sie einen häufig verwendeten Wert haben, können Sie ihn in einer Variablen speichern. Damit können Sie beispielsweise Farbschemata definieren. Sie müssen Ihr Schema nur einmal definieren und könnten es dann in Ihren Stylesheets verwenden.

Um eine Variable zu definieren, müssen Sie dem Namen das Symbol $ voranstellen. (Wie Sie es in PHP tun würden.)

Sie können jeden gültigen CSS-Eigenschaftswert in einer Variablen speichern. Wie Farben, Schriftarten oder URLs.

Beispiel 1:

$foreground: #FAFAFA;
$background: rgb(0, 0, 0);

body {
    color: $foreground;
    background-color: $background;
}

p {
    color: rgb(25, 25, 20);
    background-color: $background;
}

Importieren

Nehmen wir das folgende Szenario an: Sie haben zwei Stylesheets: _variables.scss und layout.scss . Logischerweise behalten Sie alle Variablen in Ihrem Variablen-Stylesheet, möchten aber von Ihrem Layout-Stylesheet darauf zugreifen.

HINWEIS: Möglicherweise stellen Sie fest, dass das Stylesheet für Variablen vor dem Namen einen Unterstrich ('_') hat. Dies ist darauf zurückzuführen, dass es sich um eine partielle - das heißt, es wird importiert.

sass-lang.com sagt zum Thema Partials: Sie können partielle Sass-Dateien erstellen, die kleine CSS-Ausschnitte enthalten, die Sie in andere Sass-Dateien einfügen können. Dies ist eine großartige Möglichkeit, um CSS zu modularisieren und die Wartung zu erleichtern. [...] Der Unterstrich lässt Sass wissen, dass die Datei nur eine Teildatei ist und nicht in eine CSS-Datei generiert werden sollte. Sass-Partials werden mit der Direktive @import verwendet.

SCSS-Variablen eignen sich für dieses Szenario. Nehmen wir an, dass Ihre _variables.scss aussieht:

$primary-color: #333;

Sie können es mit @import und dann den Namen des Stylesheets in Anführungszeichen setzen. Ihr Layout-Stylesheet kann jetzt so aussehen (beachten Sie, dass beim Import kein Unterstrich oder keine Dateierweiterung vorhanden ist):

@import 'variables';
body {
  color: $primary-color;
}

Dies würde etwa Folgendes ausgeben:

body {
  color: #333;
}

Verschachtelung

layout.scss

nav {
    ul {
        margin: 0;
        padding: 0;
        list-style: none;
        li {
            margin: 0 5px;
           }
       }
}

Ausgabe

nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
nav ul li {
    margin: 0 5px;    
}

Bemerkungen

SASS unterstützt zwei Arten von Kommentaren:

• Inline-Kommentare - Diese Zeilen umfassen nur eine Zeile und werden normalerweise zur Beschreibung einer Variablen oder eines Blocks verwendet. Die Syntax lautet wie folgt: // Your comment here (Sie setzen einen doppelten Schrägstrich ( // ) // und der Rest der Zeile wird vom Parser ignoriert.

• Mehrzeilige Kommentare - Diese umfassen mehrere Zeilen und werden normalerweise verwendet, um ein Urheberrecht oder eine Lizenz oben in einem Dokument anzuzeigen. Sie können einen mehrzeiligen Kommentarblock mit /* öffnen und einen mehrzeiligen Kommentarblock mit */ . Hier ist ein Beispiel:

/*
   This is a comment
   It's a multiline comment
   Also a hiaku
*/