sass
переменные

Синтаксис

• $ variable_name : значение ;

пререкаться

Переменные используются для хранения значения, которое будет использоваться несколько раз в документе Sass.

Они в основном используются для управления такими вещами, как шрифты и цвета, но могут использоваться для любой ценности любого свойства.

Sass использует символ $ чтобы сделать что-то переменным.

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

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

SCSS

Как и в Sass, переменные SCSS используются для хранения значения, которое будет использоваться несколько раз в документе SCSS.

Переменные используются в основном для хранения часто используемых значений свойств (например, шрифтов и цветов), но могут использоваться для любого значения любого свойства.

SCSS использует символ $ для объявления переменной.

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

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

Вы можете использовать !default при объявлении переменной, если вы хотите назначить новое значение этой переменной, только если она еще не назначена:

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

Область переменных

Переменные существуют в определенной области, как в JavaScript.

Если вы объявляете переменную за пределами блока, ее можно использовать по всему листу.

$blue: dodgerblue;

.main {
    background: $blue;

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

.header {
    color: $blue;
}

Если вы объявляете переменную внутри блока, ее можно использовать только в этом блоке.

.main {
    $blue: dodgerblue;

    background: $blue;

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

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

Переменные, объявленные на уровне листа (вне блока), также могут использоваться в других листах, если они импортированы .

Локализация переменных с директивой @ at-root

Директива @ at-root может использоваться для локализации переменных.

$color: blue;

@at-root {
  $color: red;

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

.c {
  color: $color;
}

составлен для:

.a {
  color: red;
}

.b {
  color: red;
}

.c {
  color: blue;
}

интерполирование

Переменные могут использоваться в строковой интерполяции. Это позволяет динамически генерировать селектора, свойства и значения. И синтаксисом для этого является переменная #{$variable} .

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

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

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

Вы не можете, однако использовать его для динамического создания имен mixins или функций.

Переменные в SCSS

В переменных SCSS начинаются с знака $ и устанавливаются как свойства CSS.

$label-color: #eee;

Они доступны только внутри вложенных селекторов, где они определены.

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

Если они определены вне любых вложенных селекторов, они могут использоваться повсюду.

$width: 5em;

#menu {
  width: $width;
}

#sidebar {
  width: $width;
}

Их также можно определить с помощью !global флага, и в этом случае они также доступны повсюду.

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

#sidebar {
  width: $width;
}

Важно отметить, что имена переменных могут использовать дефисы и подчеркивания взаимозаменяемо. Например, если вы определяете переменную с именем $label-width , вы можете получить к ней доступ как $label_width и наоборот.