sass
Zmienne

Składnia

• $ nazwa_zmiennej : wartość ;

Sass

Zmienne są używane do przechowywania wartości, która będzie wielokrotnie używana w całym dokumencie Sass.

Są one najczęściej używane do kontrolowania takich rzeczy, jak czcionki i kolory, ale można ich używać do dowolnej wartości dowolnej właściwości.

Sass używa symbolu $ aby uczynić coś zmienną.

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

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

SCSS

Podobnie jak w Sass, zmienne SCSS są używane do przechowywania wartości, która będzie używana wielokrotnie w całym dokumencie SCSS.

Zmienne są najczęściej używane do przechowywania często używanych wartości właściwości (takich jak czcionki i kolory), ale można ich używać do dowolnej wartości dowolnej właściwości.

SCSS używa symbolu $ do deklarowania zmiennej.

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

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

Możesz użyć !default przy deklarowaniu zmiennej, jeśli chcesz przypisać nową wartość do tej zmiennej tylko wtedy, gdy nie została jeszcze przypisana:

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

Zmienny zakres

Zmienne istnieją w określonym zakresie, podobnie jak w JavaScript.

Jeśli zadeklarujesz zmienną poza blokiem, można jej użyć w całym arkuszu.

$blue: dodgerblue;

.main {
    background: $blue;

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

.header {
    color: $blue;
}

Jeśli zadeklarujesz zmienną w bloku, można jej użyć tylko w tym bloku.

.main {
    $blue: dodgerblue;

    background: $blue;

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

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

Zmienne zadeklarowane na poziomie arkusza (poza blokiem) mogą być również używane w innych arkuszach, jeśli są importowane .

Lokalizuj zmienne za pomocą dyrektywy @ at-root

Dyrektywa @ at-root może być używana do lokalizowania zmiennych.

$color: blue;

@at-root {
  $color: red;

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

.c {
  color: $color;
}

jest skompilowany do:

.a {
  color: red;
}

.b {
  color: red;
}

.c {
  color: blue;
}

Interpolacja

Zmienne mogą być używane w interpolacji ciągów. Umożliwia to dynamiczne generowanie selektorów, właściwości i wartości. A składnia do zrobienia takiej zmiennej to #{$variable} .

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

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

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

Nie można go jednak użyć do dynamicznego generowania nazw miksów lub funkcji.

Zmienne w SCSS

W SCSS zmienne zaczynają się $ znaku $ i są ustawione jak właściwości CSS.

$label-color: #eee;

Są one dostępne tylko w zagnieżdżonych selektorach tam, gdzie są zdefiniowane.

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

Jeśli są zdefiniowane poza zagnieżdżonymi selektorami, można ich używać wszędzie.

$width: 5em;

#menu {
  width: $width;
}

#sidebar {
  width: $width;
}

Można je również zdefiniować za pomocą flagi !global , w takim przypadku są one również dostępne wszędzie.

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

#sidebar {
  width: $width;
}

Należy zauważyć, że nazwy zmiennych mogą używać zamiennie i podkreślników zamiennie. Na przykład, jeśli zdefiniujesz zmienną o nazwie $label-width , możesz uzyskać do niej dostęp jako $label_width i na odwrót.