Stilregeln

Stilregeln sind die Grundlage von Sass, genau wie sie es für CSS sind. Und sie funktionieren auf die gleiche Weise: Sie wählen mit einem Selektor aus, welche Elemente gestylt werden sollen, und definieren Eigenschaften, die beeinflussen, wie diese Elemente aussehen.

Spielplatz

SCSS-Syntax

.button {
  padding: 3px 10px;
  font-size: 12px;
  border-radius: 3px;
  border: 1px solid #e1e4e8;
}
Spielplatz

Sass-Syntax

.button
  padding: 3px 10px
  font-size: 12px
  border-radius: 3px
  border: 1px solid #e1e4e8

CSS-Ausgabe

.button {
  padding: 3px 10px;
  font-size: 12px;
  border-radius: 3px;
  border: 1px solid #e1e4e8;
}

VerschachtelungVerschachtelung Permalink

Aber Sass möchte Ihnen das Leben erleichtern. Anstatt dieselben Selektoren immer wieder zu wiederholen, können Sie eine Stilregel innerhalb einer anderen schreiben. Sass kombiniert automatisch den Selektor der äußeren Regel mit dem der inneren Regel.

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;
}

⚠️ Vorsicht!

Verschachtelte Regeln sind sehr hilfreich, aber sie können es auch schwierig machen, zu visualisieren, wie viel CSS Sie tatsächlich generieren. Je tiefer Sie verschachteln, desto mehr Bandbreite benötigt die Bereitstellung Ihres CSS und desto mehr Arbeit hat der Browser mit dem Rendern. Halten Sie diese Selektoren flach!

SelektorlistenSelektorlisten Permalink

Verschachtelte Regeln gehen clever mit Selektorlisten (d. h. kommagetrennten Selektoren) um. Jeder komplexe Selektor (die zwischen den Kommas) wird separat verschachtelt und dann wieder zu einer Selektorliste kombiniert.

Spielplatz

SCSS-Syntax

.alert, .warning {
  ul, p {
    margin-right: 0;
    margin-left: 0;
    padding-bottom: 0;
  }
}
Spielplatz

Sass-Syntax

.alert, .warning
  ul, p
    margin-right: 0
    margin-left: 0
    padding-bottom: 0

CSS-Ausgabe

.alert ul, .alert p, .warning ul, .warning p {
  margin-right: 0;
  margin-left: 0;
  padding-bottom: 0;
}

SelektorkombinatorenSelektorkombinatoren Permalink

Sie können auch Selektoren verschachteln, die Kombinatoren verwenden. Sie können den Kombinator am Ende des äußeren Selektors, am Anfang des inneren Selektors oder sogar ganz allein dazwischen setzen.

Spielplatz

SCSS-Syntax

ul > {
  li {
    list-style-type: none;
  }
}

h2 {
  + p {
    border-top: 1px solid gray;
  }
}

p {
  ~ {
    span {
      opacity: 0.8;
    }
  }
}
Spielplatz

Sass-Syntax

ul >
  li
    list-style-type: none



h2
  + p
    border-top: 1px solid gray



p
  ~
    span
      opacity: 0.8

CSS-Ausgabe

ul > li {
  list-style-type: none;
}

h2 + p {
  border-top: 1px solid gray;
}

p ~ span {
  opacity: 0.8;
}

Erweitertes VerschachtelnErweitertes Verschachteln Permalink

Wenn Sie mit Ihren verschachtelten Stilregeln mehr tun möchten, als sie einfach nacheinander mit dem Nachfahren-Kombinator (einem einfachen Leerzeichen) zu kombinieren, der sie trennt, ist Sass für Sie da. Weitere Informationen finden Sie in der Dokumentation zum Elternselektor.

InterpolationInterpolation Permalink

Sie können Interpolation verwenden, um Werte aus Ausdrücken wie Variablen und Funktionsaufrufen in Ihre Selektoren einzufügen. Dies ist besonders nützlich, wenn Sie Mixins schreiben, da es Ihnen ermöglicht, Selektoren aus Parametern zu erstellen, die Ihre Benutzer übergeben haben.

Spielplatz

SCSS-Syntax

@mixin define-emoji($name, $glyph) {
  span.emoji-#{$name} {
    font-family: IconFont;
    font-variant: normal;
    font-weight: normal;
    content: $glyph;
  }
}

@include define-emoji("women-holding-hands", "👭");
Spielplatz

Sass-Syntax

@mixin define-emoji($name, $glyph)
  span.emoji-#{$name}
    font-family: IconFont
    font-variant: normal
    font-weight: normal
    content: $glyph



@include define-emoji("women-holding-hands", "👭")

CSS-Ausgabe

@charset "UTF-8";
span.emoji-women-holding-hands {
  font-family: IconFont;
  font-variant: normal;
  font-weight: normal;
  content: "👭";
}

💡 Lustige Tatsache

Sass analysiert Selektoren erst, *nachdem* die Interpolation aufgelöst wurde. Das bedeutet, Sie können Interpolation sicher verwenden, um jeden Teil des Selektors zu generieren, ohne sich Sorgen machen zu müssen, dass er nicht analysiert wird.

Sie können Interpolation mit dem Elternselektor &, der @at-root Regel und Selektorfunktionen kombinieren, um beim dynamischen Generieren von Selektoren erhebliche Leistung zu erzielen. Weitere Informationen finden Sie in der Dokumentation zum Elternselektor .