Sass-Grundlagen

Bevor Sie Sass verwenden können, müssen Sie es in Ihrem Projekt einrichten. Wenn Sie hier nur stöbern möchten, legen Sie los, aber wir empfehlen Ihnen, Sass zuerst zu installieren. Gehen Sie hierhin, wenn Sie lernen möchten, wie Sie alles einrichten. 

PräprozessierungPräprozessierung Permalink

CSS allein kann Spaß machen, aber Stylesheets werden größer, komplexer und schwerer zu warten. Hier kann ein Präprozessor helfen. Sass verfügt über Funktionen, die in CSS noch nicht vorhanden sind, wie z. B. Verschachtelung, Mixins, Vererbung und andere nette Goodies, die Ihnen helfen, robuste, wartbare CSS zu schreiben.

Sobald Sie mit Sass experimentieren, wird es Ihre vorverarbeitete Sass-Datei nehmen und als normale CSS-Datei speichern, die Sie in Ihrer Website verwenden können.

Der direkteste Weg, dies zu erreichen, ist über Ihr Terminal. Sobald Sass installiert ist, können Sie Ihr Sass mit dem Befehl sass in CSS kompilieren. Sie müssen Sass mitteilen, aus welcher Datei erstellt werden soll und wohin die CSS ausgegeben werden soll. Wenn Sie beispielsweise sass input.scss output.css von Ihrem Terminal aus ausführen, wird eine einzelne Sass-Datei, input.scss, genommen und in output.css kompiliert.

Sie können einzelne Dateien oder Verzeichnisse auch mit dem Flaggen --watch überwachen. Die Watch-Flagge weist Sass an, Ihre Quelldateien auf Änderungen zu überwachen und jedes Mal CSS neu zu kompilieren, wenn Sie Ihre Sass speichern. Wenn Sie Ihre input.scss-Datei überwachen (anstatt sie manuell zu erstellen) möchten, fügen Sie einfach die Watch-Flagge zu Ihrem Befehl hinzu, so .

sass --watch input.scss output.css

Sie können Verzeichnisse überwachen und in diese ausgeben, indem Sie Ordnerpfade als Eingabe und Ausgabe verwenden und diese durch einen Doppelpunkt trennen. In diesem Beispiel

sass --watch app/sass:public/stylesheets

Sass würde alle Dateien im Ordner app/sass auf Änderungen überwachen und CSS in den Ordner public/stylesheets kompilieren.

💡 Lustige Tatsache

Sass hat zwei Syntaxen! Die SCSS-Syntax (.scss) wird am häufigsten verwendet. Sie ist eine Obermenge von CSS, was bedeutet, dass jedes gültige CSS auch gültiges SCSS ist. Die eingerückte Syntax (.sass) ist ungewöhnlicher: Sie verwendet Einrückungen anstelle von geschweiften Klammern, um Anweisungen zu verschachteln, und Zeilenumbrüche anstelle von Semikolons, um sie zu trennen. Alle unsere Beispiele sind in beiden Syntaxen verfügbar.

VariablenVariablen Permalink

Betrachten Sie Variablen als eine Möglichkeit, Informationen zu speichern, die Sie in Ihrem Stylesheet wiederverwenden möchten. Sie können Dinge wie Farben, Schriftstapel oder beliebige CSS-Werte speichern, von denen Sie glauben, dass Sie sie wiederverwenden möchten. Sass verwendet das $-Symbol, um etwas zu einer Variable zu machen. Hier ist ein Beispiel

Spielplatz

SCSS-Syntax

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}
Spielplatz

Sass-Syntax

$font-stack: Helvetica, sans-serif
$primary-color: #333

body
  font: 100% $font-stack
  color: $primary-color

CSS-Ausgabe

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

Wenn Sass verarbeitet wird, nimmt es die für $font-stack und $primary-color definierten Variablen und gibt normales CSS aus, wobei unsere Variablenwerte in den CSS eingefügt werden. Dies kann äußerst wirkungsvoll sein, wenn Sie mit Markenfarben arbeiten und diese auf der gesamten Website konsistent halten.

VerschachtelungVerschachtelung Permalink

Beim Schreiben von HTML haben Sie wahrscheinlich bemerkt, dass es eine klare verschachtelte und visuelle Hierarchie hat. CSS hingegen nicht.

Sass ermöglicht es Ihnen, Ihre CSS-Selektoren so zu verschachteln, dass sie derselben visuellen Hierarchie Ihres HTML folgen. Beachten Sie, dass übermäßig verschachtelte Regeln zu überqualifiziertem CSS führen, das schwer zu warten sein kann und generell als schlechte Praxis gilt.

Mit diesem im Hinterkopf, hier ist ein Beispiel für einige typische Stile für die Navigation einer Website

Spielplatz

SCSS-Syntax

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

  li { display: inline-block; }

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

Sass-Syntax

nav
  ul
    margin: 0
    padding: 0
    list-style: none

  li
    display: inline-block

  a
    display: block
    padding: 6px 12px
    text-decoration: none

CSS-Ausgabe

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

Sie werden feststellen, dass die Selektoren ul, li und a innerhalb des nav-Selektors verschachtelt sind. Dies ist eine hervorragende Möglichkeit, Ihr CSS zu organisieren und es lesbarer zu machen.

PartialsPartials Permalink

Sie können partielle Sass-Dateien erstellen, die kleine CSS-Schnipsel enthalten, die Sie in andere Sass-Dateien einfügen können. Dies ist eine großartige Möglichkeit, Ihr CSS zu modularisieren und die Wartung zu erleichtern. Ein Partial ist eine Sass-Datei, die mit einem führenden Unterstrich benannt ist. Sie könnten sie zum Beispiel _partial.scss nennen. Der Unterstrich signalisiert Sass, dass die Datei nur eine partielle Datei ist und nicht als CSS-Datei generiert werden soll. Sass-Partials werden mit der @use-Regel verwendet.

ModuleModule Permalink

Kompatibilität
Dart Sass
seit 1.23.0
LibSass
✗
Ruby Sass
✗

Nur Dart Sass unterstützt derzeit @use. Benutzer anderer Implementierungen müssen stattdessen die @import-Regel verwenden.

Sie müssen nicht Ihr gesamtes Sass in einer einzigen Datei schreiben. Sie können es mit der @use-Regel beliebig aufteilen. Diese Regel lädt eine andere Sass-Datei als Modul, was bedeutet, dass Sie in Ihrer Sass-Datei mit einem Namespace, der auf dem Dateinamen basiert, auf deren Variablen, Mixins und Funktionen verweisen können. Die Verwendung einer Datei beinhaltet auch die von ihr generierte CSS in Ihrer kompilierten Ausgabe!

SCSS-Syntax

// _base.scss
$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

// styles.scss
@use 'base';

.inverse {
  background-color: base.$primary-color;
  color: white;
}

Sass-Syntax

// _base.sass
$font-stack: Helvetica, sans-serif
$primary-color: #333

body
  font: 100% $font-stack
  color: $primary-color


// styles.sass
@use 'base'

.inverse
  background-color: base.$primary-color
  color: white

CSS-Ausgabe

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

.inverse {
  background-color: #333;
  color: white;
}

Beachten Sie, dass wir @use 'base'; in der Datei styles.scss verwenden. Wenn Sie eine Datei verwenden, müssen Sie die Dateierweiterung nicht angeben. Sass ist schlau und findet sie für Sie.

MixinsMixins Permalink

Einige Dinge in CSS sind etwas mühsam zu schreiben, besonders mit CSS3 und den vielen vorhandenen Vendor-Präfixen. Ein Mixin ermöglicht es Ihnen, Gruppen von CSS-Deklarationen zu erstellen, die Sie auf Ihrer gesamten Website wiederverwenden möchten. Es hilft, Ihr Sass sehr DRY zu halten. Sie können sogar Werte übergeben, um Ihr Mixin flexibler zu gestalten. Hier ist ein Beispiel für theme.

Spielplatz

SCSS-Syntax

@mixin theme($theme: DarkGray) {
  background: $theme;
  box-shadow: 0 0 1px rgba($theme, .25);
  color: #fff;
}

.info {
  @include theme;
}
.alert {
  @include theme($theme: DarkRed);
}
.success {
  @include theme($theme: DarkGreen);
}
Spielplatz

Sass-Syntax

@mixin theme($theme: DarkGray)
  background: $theme
  box-shadow: 0 0 1px rgba($theme, .25)
  color: #fff

.info
  @include theme

.alert
  @include theme($theme: DarkRed)

.success
  @include theme($theme: DarkGreen)

CSS-Ausgabe

.info {
  background: DarkGray;
  box-shadow: 0 0 1px rgba(169, 169, 169, 0.25);
  color: #fff;
}

.alert {
  background: DarkRed;
  box-shadow: 0 0 1px rgba(139, 0, 0, 0.25);
  color: #fff;
}

.success {
  background: DarkGreen;
  box-shadow: 0 0 1px rgba(0, 100, 0, 0.25);
  color: #fff;
}

Um ein Mixin zu erstellen, verwenden Sie die Direktive @mixin und geben ihm einen Namen. Wir haben unser Mixin theme genannt. Wir verwenden auch die Variable $theme innerhalb der Klammern, damit wir einen theme von beliebigem Wert übergeben können. Nachdem Sie Ihr Mixin erstellt haben, können Sie es als CSS-Deklaration verwenden, beginnend mit @include gefolgt vom Namen des Mixins.

Erweitern/VererbungErweitern/Vererbung Permalink

Mit @extend können Sie einen Satz von CSS-Eigenschaften von einem Selektor auf einen anderen übertragen. In unserem Beispiel erstellen wir eine einfache Reihe von Meldungen für Fehler, Warnungen und Erfolge, indem wir eine weitere Funktion verwenden, die mit extend Hand in Hand geht: Platzhalterklassen. Eine Platzhalterklasse ist ein spezieller Klassentyp, der nur gedruckt wird, wenn er erweitert wird, und dazu beitragen kann, Ihr kompiliertes CSS ordentlich und sauber zu halten.

Spielplatz

SCSS-Syntax

/* This CSS will print because %message-shared is extended. */
%message-shared {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

// This CSS won't print because %equal-heights is never extended.
%equal-heights {
  display: flex;
  flex-wrap: wrap;
}

.message {
  @extend %message-shared;
}

.success {
  @extend %message-shared;
  border-color: green;
}

.error {
  @extend %message-shared;
  border-color: red;
}

.warning {
  @extend %message-shared;
  border-color: yellow;
}
Spielplatz

Sass-Syntax

/* This CSS will print because %message-shared is extended. */
%message-shared
  border: 1px solid #ccc
  padding: 10px
  color: #333

// This CSS won't print because %equal-heights is never extended.
%equal-heights
  display: flex
  flex-wrap: wrap

.message
  @extend %message-shared

.success
  @extend %message-shared
  border-color: green

.error
  @extend %message-shared
  border-color: red

.warning
  @extend %message-shared
  border-color: yellow

CSS-Ausgabe

/* This CSS will print because %message-shared is extended. */
.warning, .error, .success, .message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  border-color: green;
}

.error {
  border-color: red;
}

.warning {
  border-color: yellow;
}

Was der obige Code tut, ist, .message, .success, .error und .warning so zu gestalten, dass sie sich wie %message-shared verhalten. Das bedeutet, dass überall dort, wo %message-shared vorkommt, auch .message, .success, .error, & .warning vorkommen. Die Magie geschieht in der generierten CSS, wo jede dieser Klassen dieselben CSS-Eigenschaften wie %message-shared erhält. Dies hilft Ihnen, die Notwendigkeit zu vermeiden, mehrere Klassennamen auf HTML- Elementen zu schreiben.

Sie können die meisten einfachen CSS-Selektoren zusätzlich zu Platzhalterklassen in Sass erweitern, aber die Verwendung von Platzhaltern ist der einfachste Weg, um sicherzustellen, dass Sie keine Klasse erweitern, die woanders in Ihren Stilen verschachtelt ist, was zu unbeabsichtigten Selektoren in Ihrem CSS führen kann.

Beachten Sie, dass das CSS in %equal-heights nicht generiert wird, da %equal-heights niemals erweitert wird.

OperatorenOperatoren Permalink

Mathematik in Ihrem CSS ist sehr hilfreich. Sass verfügt über eine Reihe von Standard-Mathematikoperatoren wie +, -, *, math.div() und %. In unserem Beispiel werden wir einige einfache Berechnungen durchführen, um die Breiten für einen article und einen aside zu ermitteln.

Spielplatz

SCSS-Syntax

@use "sass:math";

.container {
  display: flex;
}

article[role="main"] {
  width: math.div(600px, 960px) * 100%;
}

aside[role="complementary"] {
  width: math.div(300px, 960px) * 100%;
  margin-left: auto;
}
Spielplatz

Sass-Syntax

@use "sass:math"

.container
  display: flex

article[role="main"]
  width: math.div(600px, 960px) * 100%

aside[role="complementary"]
  width: math.div(300px, 960px) * 100%
  margin-left: auto

CSS-Ausgabe

.container {
  display: flex;
}

article[role=main] {
  width: 62.5%;
}

aside[role=complementary] {
  width: 31.25%;
  margin-left: auto;
}

Wir haben ein sehr einfaches flüssiges Raster auf Basis von 960px erstellt. Operationen in Sass ermöglichen es uns, Pixelwerte zu nehmen und sie ohne viel Aufwand in Prozente umzuwandeln.