Переменные

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

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

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

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

.alert
  border: 1px solid $border-dark

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

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

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

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


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

/* CSS */
.rule-1 {
  value: value 1;
}

.rule-2 {
  value: value 2;
}

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

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

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

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

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

Dart Sass

с версии 1.23.0

LibSass

✗

Ruby Sass

✗

➤

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

Чтобы загрузить модуль с настройкой, запишите @use <url> with (<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
);

// SASS
// _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

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

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

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

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

@use "sass:math" as math;

// This assignment will fail.
math.$pi: 0;

// SASS
@use "sass:math" as math

// This assignment will fail.
math.$pi: 0

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

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

$global-variable: global value;

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

.sidebar {
  global: $global-variable;

  // This would fail, because $local-variable isn't in scope:
  // local: $local-variable;
}

// SASS
$global-variable: global value

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


.sidebar
  global: $global-variable

  // This would fail, because $local-variable isn't in scope:
  // local: $local-variable

/* CSS */
.content {
  global: global value;
  local: local value;
}

.sidebar {
  global: global value;
}

Затенение

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

$variable: global value;

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

.sidebar {
  value: $variable;
}

// SASS
$variable: global value

.content
  $variable: local value
  value: $variable


.sidebar
  value: $variable

/* CSS */
.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;
}

// SASS
$variable: first global value

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


.sidebar
  value: $variable

/* CSS */
.content {
  value: second global value;
}

.sidebar {
  value: second global value;
}

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

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

$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;
}

// SASS
$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

/* CSS */
.button {
  background-color: rgb(116.96, 12.04, 48.16);
  border: 1px solid rgb(245.4696132597, 235.4309392265, 251.5690607735);
  border-radius: 3px;
}

Расширенные функции переменных

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