sass
Variablen

Syntax

• $ Variablenname : Wert ;

Sass

Variablen werden zum einmaligen Speichern eines Werts verwendet, der in einem Sass-Dokument mehrmals verwendet wird.

Sie werden hauptsächlich zum Steuern von Objekten wie Schriftarten und Farben verwendet, können jedoch für jeden Wert einer beliebigen Eigenschaft verwendet werden.

Sass verwendet das Symbol $ , um etwas zu einer Variablen zu machen.

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

body
  font-family: $font-stack
  color: $primary-color

SCSS

Wie in Sass werden SCSS-Variablen verwendet, um einen Wert zu speichern, der in einem SCSS-Dokument mehrmals verwendet wird.

Variablen werden meistens zum Speichern häufig verwendeter Eigenschaftswerte (wie Schriftarten und Farben) verwendet, können jedoch für jeden Wert einer beliebigen Eigenschaft verwendet werden.

SCSS verwendet das Symbol $ , um eine Variable zu deklarieren.

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

body {
  font-family: $font-stack;
  color: $primary-color;
}

Sie können !default bei der Deklaration einer Variablen verwenden, wenn Sie dieser Variablen nur dann einen neuen Wert zuweisen möchten, wenn sie noch nicht zugewiesen wurde:

$primary-color: blue;
$primary-color: red !default; // $primary-color is still "blue"
$primary-color: green;        // And now it's green.

Variabler Umfang

Variablen existieren in einem bestimmten Bereich, ähnlich wie in JavaScript.

Wenn Sie eine Variable außerhalb eines Blocks deklarieren, kann sie im gesamten Arbeitsblatt verwendet werden.

$blue: dodgerblue;

.main {
    background: $blue;

    p {
        background: #ffffff;
        color: $blue;
    }
}

.header {
    color: $blue;
}

Wenn Sie eine Variable innerhalb eines Blocks deklarieren, kann sie nur in diesem Block verwendet werden.

.main {
    $blue: dodgerblue;

    background: $blue;

    p {
        background: #ffffff;
        color: $blue;
    }
}

.header {
    color: $blue; // throws a variable not defined error in SASS compiler
}

Auf Blattebene (außerhalb eines Blocks) deklarierte Variablen können auch in anderen Blättern verwendet werden, wenn sie importiert werden .

Variablen mit @ at-root-Direktive lokalisieren

Die @ at-root- Direktive kann zum Lokalisieren von Variablen verwendet werden.

$color: blue;

@at-root {
  $color: red;

  .a {
    color: $color;
  }
  .b {
    color: $color;
  }
}

.c {
  color: $color;
}

wird kompiliert zu:

.a {
  color: red;
}

.b {
  color: red;
}

.c {
  color: blue;
}

Interpolation

Variablen können bei der String-Interpolation verwendet werden. Auf diese Weise können Sie Selektoren, Eigenschaften und Werte dynamisch generieren. Und die Syntax dafür ist #{$variable} .

$className: widget;
$content: 'a widget';
$prop: content;

.#{$className}-class {
  #{content}: 'This is #{$content}';
}
// Compiles to

.widget-class {
  content: "This is a widget";
}

Sie können es jedoch nicht verwenden, um Namen von Mixins oder Funktionen dynamisch zu generieren.

Variablen in SCSS

In SCSS beginnen Variablen mit $ sign und werden wie CSS-Eigenschaften gesetzt.

$label-color: #eee;

Sie sind nur in verschachtelten Selektoren verfügbar, wo sie definiert sind.

#menu {
    $basic-color: #eee;
    color: $basic-color;
}

Wenn sie außerhalb von verschachtelten Selektoren definiert sind, können sie überall verwendet werden.

$width: 5em;

#menu {
  width: $width;
}

#sidebar {
  width: $width;
}

Sie können auch mit der !global Flag !global Definiert werden. In diesem Fall sind sie auch überall verfügbar.

#menu {
  $width: 5em !global;
  width: $width;
}

#sidebar {
  width: $width;
}

Es ist wichtig zu beachten, dass Variablennamen Bindestriche und Unterstriche austauschbar verwenden können. Wenn Sie beispielsweise eine Variable mit dem Namen $label-width , können Sie als $label_width auf sie $label_width und umgekehrt.