Eigenschaftsdeklarationen

In Sass, wie in CSS, definieren Eigenschaftsdeklarationen, wie Elemente, die einem Selektor entsprechen, gestylt werden. Sass fügt jedoch zusätzliche Funktionen hinzu, um sie einfacher zu schreiben und zu automatisieren. In erster Linie kann der Wert einer Deklaration jeder SassScript-Ausdruck sein, der ausgewertet und in das Ergebnis aufgenommen wird.

Spielplatz

SCSS-Syntax

.circle {
  $size: 100px;
  width: $size;
  height: $size;
  border-radius: $size * 0.5;
}
Spielplatz

Sass-Syntax

.circle
  $size: 100px
  width: $size
  height: $size
  border-radius: $size * 0.5

CSS-Ausgabe

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50px;
}

InterpolationInterpolation Permalink

Der Name einer Eigenschaft kann Interpolation enthalten, was es ermöglicht, nach Bedarf dynamisch Eigenschaften zu generieren. Sie können sogar den gesamten Eigenschaftsnamen interpolieren!

Spielplatz

SCSS-Syntax

@mixin prefix($property, $value, $prefixes) {
  @each $prefix in $prefixes {
    -#{$prefix}-#{$property}: $value;
  }
  #{$property}: $value;
}

.gray {
  @include prefix(filter, grayscale(50%), moz webkit);
}
Spielplatz

Sass-Syntax

@mixin prefix($property, $value, $prefixes)
  @each $prefix in $prefixes
    -#{$prefix}-#{$property}: $value

  #{$property}: $value


.gray
  @include prefix(filter, grayscale(50%), moz webkit)

CSS-Ausgabe

.gray {
  -moz-filter: grayscale(50%);
  -webkit-filter: grayscale(50%);
  filter: grayscale(50%);
}

VerschachtelungVerschachtelung Permalink

Viele CSS-Eigenschaften beginnen mit demselben Präfix, das als eine Art Namespace dient. Zum Beispiel beginnen font-family, font-size und font-weight alle mit font-. Sass macht dies einfacher und weniger redundant, indem es zulässt, dass Eigenschaftsdeklarationen verschachtelt werden. Die äußeren Eigenschaftsnamen werden zu den inneren hinzugefügt, getrennt durch einen Bindestrich.

Spielplatz

SCSS-Syntax

.enlarge {
  font-size: 14px;
  transition: {
    property: font-size;
    duration: 4s;
    delay: 2s;
  }

  &:hover { font-size: 36px; }
}
Spielplatz

Sass-Syntax

.enlarge
  font-size: 14px
  transition:
    property: font-size
    duration: 4s
    delay: 2s

  &:hover
    font-size: 36px

CSS-Ausgabe

.enlarge {
  font-size: 14px;
  transition-property: font-size;
  transition-duration: 4s;
  transition-delay: 2s;
}
.enlarge:hover {
  font-size: 36px;
}

Einige dieser CSS-Eigenschaften haben Kurzformen, die den Namespace als Eigenschaftsnamen verwenden. Für diese können Sie sowohl den Kurzformwert *als auch* die expliziteren verschachtelten Versionen schreiben.

Spielplatz

SCSS-Syntax

.info-page {
  margin: auto {
    bottom: 10px;
    top: 2px;
  }
}
Spielplatz

Sass-Syntax

.info-page
  margin: auto
    bottom: 10px
    top: 2px

CSS-Ausgabe

.info-page {
  margin: auto;
  margin-bottom: 10px;
  margin-top: 2px;
}

Versteckte DeklarationenVersteckte Deklarationen Permalink

Manchmal möchten Sie, dass eine Eigenschaftsdeklaration nur manchmal angezeigt wird. Wenn der Wert einer Deklaration null oder ein leerer nicht zitierter String ist, kompiliert Sass diese Deklaration überhaupt nicht zu CSS.

Spielplatz

SCSS-Syntax

$rounded-corners: false;

.button {
  border: 1px solid black;
  border-radius: if($rounded-corners, 5px, null);
}
Spielplatz

Sass-Syntax

$rounded-corners: false

.button
  border: 1px solid black
  border-radius: if($rounded-corners, 5px, null)

CSS-Ausgabe

.button {
  border: 1px solid black;
}

Benutzerdefinierte EigenschaftenBenutzerdefinierte Eigenschaften Permalink

Kompatibilität (SassScript-Syntax)
Dart Sass
✓
LibSass
seit 3.5.0
Ruby Sass
seit 3.5.0

Ältere Versionen von LibSass und Ruby Sass analysierten benutzerdefinierte Eigenschaftsdeklarationen wie jede andere Eigenschaftsdeklaration und erlaubten den vollen Umfang von SassScript-Ausdrücken als Werte. Auch bei der Verwendung dieser Versionen wird empfohlen, Interpolation zu verwenden, um SassScript-Werte für die zukünftige Kompatibilität einzufügen.

Weitere Informationen finden Sie auf der Seite Änderungen.

CSS-benutzerdefinierte Eigenschaften, auch bekannt als CSS-Variablen, haben eine ungewöhnliche Deklarationssyntax: Sie erlauben fast jeden Text in ihren Deklarationswerten. Darüber hinaus sind diese Werte für JavaScript zugänglich, sodass jeder Wert potenziell für den Benutzer relevant sein kann. Dies schließt Werte ein, die normalerweise als SassScript interpretiert würden.

Aus diesem Grund analysiert Sass benutzerdefinierte Eigenschaftsdeklarationen anders als andere Eigenschaftsdeklarationen. Alle Token, einschließlich derjenigen, die wie SassScript aussehen, werden unverändert an CSS weitergegeben. Die einzige Ausnahme ist die Interpolation, die die einzige Möglichkeit ist, dynamische Werte in eine benutzerdefinierte Eigenschaft einzufügen.

Spielplatz

SCSS-Syntax

$primary: #81899b;
$accent: #302e24;
$warn: #dfa612;

:root {
  --primary: #{$primary};
  --accent: #{$accent};
  --warn: #{$warn};

  // Even though this looks like a Sass variable, it's valid CSS so it's not
  // evaluated.
  --consumed-by-js: $primary;
}
Spielplatz

Sass-Syntax

$primary: #81899b
$accent: #302e24
$warn: #dfa612

:root
  --primary: #{$primary}
  --accent: #{$accent}
  --warn: #{$warn}

  // Even though this looks like a Sass variable, it's valid CSS so it's not
  // evaluated.
  --consumed-by-js: $primary

CSS-Ausgabe

:root {
  --primary: #81899b;
  --accent: #302e24;
  --warn: #dfa612;
  --consumed-by-js: $primary;
}

⚠️ Vorsicht!

Leider entfernt die Interpolation Anführungszeichen aus Strings, was die Verwendung von zitierten Strings als Werte für benutzerdefinierte Eigenschaften erschwert, wenn sie aus Sass-Variablen stammen. Als Workaround können Sie die Funktion meta.inspect() verwenden, um die Anführungszeichen beizubehalten.

Spielplatz

SCSS-Syntax

@use "sass:meta";

$font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto;
$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas;

:root {
  --font-family-sans-serif: #{meta.inspect($font-family-sans-serif)};
  --font-family-monospace: #{meta.inspect($font-family-monospace)};
}
Spielplatz

Sass-Syntax

@use "sass:meta"

$font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto
$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas

:root
  --font-family-sans-serif: #{meta.inspect($font-family-sans-serif)}
  --font-family-monospace: #{meta.inspect($font-family-monospace)}

CSS-Ausgabe

:root {
  --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto;
  --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas;
}