Переменные

Объявление переменной очень похоже на объявление свойства: оно написано <variable>: <expression>. В отличие от свойства, которое можно объявить только в правиле стиля или в правиле, переменные можно объявлять где угодно. Чтобы использовать переменную, просто включите ее в значение.

$base-color: #c6538c;
$border-dark: rgba($base-color, 0.88);

.alert {
  border: 1px solid $border-dark;
}

$base-color: #c6538c
$border-dark: rgba($base-color, 0.88)

.alert
  border: 1px solid $border-dark

.alert {
  border: 1px solid rgba(198, 83, 140, 0.88);
}

$variable: value 1;
.rule-1 {
  value: $variable;
}

$variable: value 2;
.rule-2 {
  value: $variable;
}

$variable: value 1
.rule-1
  value: $variable


$variable: value 2
.rule-2
  value: $variable

.rule-1 {
  value: value 1;
}

.rule-2 {
  value: value 2;
}

Значения по умолчанию permalinkЗначения по умолчанию

Обычно, когда вы присваиваете значение переменной, если эта переменная уже имела значение, ее старое значение перезаписывается. Но если вы пишете библиотеку Sass, вы можете разрешить своим пользователям настраивать переменные вашей библиотеки, прежде чем использовать их для генерации CSS.

Чтобы сделать это возможным, Sass предоставляет флаг !default. Это присваивает значение переменной, только если эта переменная не определена или ее значение равно null. В противном случае будет использоваться существующее значение.

Настройка модулей permalinkНастройка модулей

Совместимость:

Dart Sass

since 1.23.0

LibSass

✗

Ruby Sass

✗

▶

Переменные, определенные с помощью !default, могут быть настроены при загрузке модуля с помощью правила @use. Библиотеки Sass часто используют переменные !default, чтобы позволить своим пользователям настраивать CSS библиотеки.

Чтобы загрузить модуль с конфигурацией, напишите @use <url> с (<variable>: <value>, <variable>: <value>). Настроенные значения заменят значения переменных по умолчанию. Могут быть настроены только переменные, записанные на верхнем уровне таблицы стилей с флагом !default.

// _library.scss
$black: #000 !default;
$border-radius: 0.25rem !default;
$box-shadow: 0 0.5rem 1rem rgba($black, 0.15) !default;

code {
  border-radius: $border-radius;
  box-shadow: $box-shadow;
}

// style.scss
@use 'library' with (
  $black: #222,
  $border-radius: 0.1rem
);

// _library.sass
$black: #000 !default
$border-radius: 0.25rem !default
$box-shadow: 0 0.5rem 1rem rgba($black, 0.15) !default

code
  border-radius: $border-radius
  box-shadow: $box-shadow

// style.sass
@use 'library' with ($black: #222, $border-radius: 0.1rem)

code {
  border-radius: 0.1rem;
  box-shadow: 0 0.5rem 1rem rgba(34, 34, 34, 0.15);
}

Встроенные переменные permalinkВстроенные переменные

Переменные, определенные встроенным модулем, не могут быть изменены.

@use "sass:math" as math;

// Это задание будет провалено.
math.$pi: 0;

@use "sass:math" as math

// Это задание будет провалено.
math.$pi: 0

Область видимости permalinkОбласть видимости

Переменные, объявленные на верхнем уровне таблицы стилей, являются глобальными. Это означает, что к ним можно получить доступ в любом месте их модуля после того, как они были объявлены. Но это верно не для всех переменных. Те, которые объявлены в блоках (фигурные скобки в SCSS или код с отступом в Sass), обычно являются локальными, и к ним можно получить доступ только внутри блока, в котором они были объявлены.

$global-variable: global value;

.content {
  $local-variable: local value;
  global: $global-variable;
  local: $local-variable;
}

.sidebar {
  global: $global-variable;

  // Это не удастся, потому что $local-variable не входит в область видимости:
  // local: $local-variable;
}

$global-variable: global value

.content
  $local-variable: local value
  global: $global-variable
  local: $local-variable


.sidebar
  global: $global-variable

  // Это не удастся, потому что $local-variable не входит в область видимости:
  // local: $local-variable

.content {
  global: global value;
  local: local value;
}

.sidebar {
  global: global value;
}

Затенение permalinkЗатенение

Локальные переменные можно даже объявлять с тем же именем, что и глобальная переменная. Если это произойдет, на самом деле есть две разные переменные с одним и тем же именем: одна локальная и одна глобальная. Это помогает гарантировать, что автор, пишущий локальную переменную, случайно не изменит значение глобальной переменной, о которой он даже не подозревает.

$variable: global value;

.content {
  $variable: local value;
  value: $variable;
}

.sidebar {
  value: $variable;
}

$variable: global value

.content
  $variable: local value
  value: $variable


.sidebar
  value: $variable

.content {
  value: local value;
}

.sidebar {
  value: global value;
}

Если вам нужно установить значение глобальной переменной из локальной области видимости (например, в миксине), вы можете использовать флаг !global. Объявление переменной, помеченное как !global, всегда будет присвоено глобальной области видимости.

$variable: first global value;

.content {
  $variable: second global value !global;
  value: $variable;
}

.sidebar {
  value: $variable;
}

$variable: first global value

.content
  $variable: second global value !global
  value: $variable


.sidebar
  value: $variable

.content {
  value: second global value;
}

.sidebar {
  value: second global value;
}

Область управления потоком permalinkОбласть управления потоком

Переменные, объявленные в правилах управления потоком, имеют особые правила области видимости: они не затеняют переменные на том же уровне, что и правило управления потоком. Вместо этого они просто присваивают эти переменные. Это значительно упрощает условное присвоение значения переменной или создание значения как части цикла.

$dark-theme: true !default;
$primary-color: #f8bbd0 !default;
$accent-color: #6a1b9a !default;

@if $dark-theme {
  $primary-color: darken($primary-color, 60%);
  $accent-color: lighten($accent-color, 60%);
}

.button {
  background-color: $primary-color;
  border: 1px solid $accent-color;
  border-radius: 3px;
}

$dark-theme: true !default
$primary-color: #f8bbd0 !default
$accent-color: #6a1b9a !default

@if $dark-theme
  $primary-color: darken($primary-color, 60%)
  $accent-color: lighten($accent-color, 60%)


.button
  background-color: $primary-color
  border: 1px solid $accent-color
  border-radius: 3px

.button {
  background-color: #750c30;
  border: 1px solid #f5ebfc;
  border-radius: 3px;
}

Продвинутые функции переменных permalinkПродвинутые функции переменных

Основная библиотека Sass предоставляет несколько дополнительных функций для работы с переменными. Функция meta.variable-exists() возвращает, существует ли переменная с данным именем в текущей области, а функция meta.global-variable-exists() делает то же самое. но только в глобальном масштабе.

@use "sass:map";

$theme-colors: (
  "success": #28a745,
  "info": #17a2b8,
  "warning": #ffc107,
);

.alert {
  // Вместо $theme-color-#{warning}
  background-color: map.get($theme-colors, "warning");
}

@use "sass:map"

$theme-colors: ("success": #28a745, "info": #17a2b8, "warning": #ffc107)

.alert
  // Вместо $theme-color-#{warning}
  background-color: map.get($theme-colors, "warning")

.alert {
  background-color: #ffc107;
}