Переменные — SASS: Основы работы

Одним из самых простых, но при этом мощных инструментов в SASS являются переменные. Они просты по своей сути, но сильно облегчают жизнь при поддержке проекта.

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

• Тёмный — #303846
• Светлый — #f7f7f7
• Основной — #09d3ac
• Вторичный — #2196f3

Теперь в начале нашего SASS-файла мы можем объявить переменные и записать эти значения в них. Для этого используется символ $ и указывается уникальное имя.

$dark: #303846;
$light: #f7f7f7;
$primary: #09d3ac;
$secondary: #2196f3;

Теперь мы можем использовать эти цвета в любой части нашего проекта, просто обращаясь к ним по имени.

.card {
  background: $light;
  border: 1px solid $dark;
}

В результате компиляции получится следующий CSS-код:

.card {
  background: #f7f7f7;
  border: 1px solid #303846;
}

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

Многие могут возразить, что переменные уже существуют в CSS и их использование похоже на то, что было описано выше. Вы будете правы — в CSS сейчас возможно управлять цветами точно таким же образом. Но при этом появляются лишние значения и само использование переменных чуть сложнее, чем это происходит в препроцессорах. Также важно понимать разницу переменных в SASS и в CSS. Переменные в CSS существуют в "настоящем времени", то есть они находятся в CSS-файле, их можно менять непосредственно в CSS и браузеры постоянно ссылаются на них, когда это необходимо. Переменные же в SASS исчезают после компиляции, а вместо них в CSS просто подставляются значения.

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

Переменная может быть объявлена как внутри селектора, так и вне его. В зависимости от того, где была объявлена переменная, ей можно пользоваться или во всём проекте или только внутри определённого селектора. Посмотрите на пример такого кода:

$margin-top: 20px;

.card {
  $bg-color: #f9f9f9;
}

.wrapper {
  margin-top: $margin-top;
  background: $bg-color;
}

В данном случае мы объявили две переменные: $margin-top и $bg-color. Впоследствии обе переменные были использованы в селекторе .wrapper. Что произойдёт после компиляции? На самом деле никакой компиляции не произойдёт. Мы получим сообщение об ошибке:

Error: Undefined variable.
  ╷
9 │   background: $bg-color;
  │               ^^^^^^^^^
  ╵

Компилятор говорит нам, что на 9 строке используется неизвестная переменная. Но ведь она есть — мы её объявили на 4 строке! Да — в коде действительно существует переменная $bg-color, но она существует только внутри селектора .card и вне этого селектора просто невидна.

Такое поведение называется областью видимости переменной. В зависимости от того, где мы объявили переменную, мы можем получать доступ к ней или во всём проекте, или только внутри одного селектора. Переменная $margin-top в этом примере является глобальной переменной, так как доступ к ней есть в любом участке нашего SASS-файла. Переменная $bg-color в примере является локальной переменной и доступна она только внутри того селектора, где была определена.

Разберём ещё один пример:

.card {
  $main-bg: #f9f9f9;
  $header-bg: #2196f3;

  .card-header {
    background: $header-bg;
  }

  .card-body {
    background: $main-bg;
  }
}

Обратите внимание, что переменные $main-bg и $header-bg объявлены внутри селектора .card. Так как селекторы .card-header и .card-body лежат внутри селектора .card, то переменные $main-bg и $header-bg будут доступны для этих селекторов. После компиляции мы получим следующий CSS-код:

.card .card-header {
  background: #2196f3;
}

.card .card-body {
  background: #f9f9f9;
}

Именование переменных

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

$main-bg: #f7f7f7;

.card {
  $main-bg: #f9f9f9;
  $header-bg: #2196f3;

  .card-header {
    background: $header-bg;
  }

  .card-body {
    background: $main-bg;
  }
}

.wrapper {
  background: $main-bg;
}

Заметьте, что переменная $main-bg объявлена и в начале SASS-файла и в селекторе .card. Скорее всего с первого взгляда вы не определите какой $main-bg будет использован в проекте. Попробуем скомпилировать этот код. В этот раз ошибок не будет:

.card .card-header {
  background: #2196f3;
}

.card .card-body {
  background: #f9f9f9;
}

.wrapper {
  background: #f7f7f7;
}

Созданная внутри селектора .card переменная $main-bg на самом деле не имеет ничего общего с глобальной переменной $main-bg. Даже при условии того, что они имеют одинаковые имена. Но вот путаницу это может внести, поэтому никогда не используйте одинаковые имена для глобальных и локальных переменных.

Подключение переменных из другого файла

Часто для удобной организации SASS стили разбиваются на несколько независимых файлов, в зависимости от их назначения. Например, у нас может быть следующая структура файлов:

└── scss/
    ├── config.scss
    ├── default_variables.scss
    └── app.scss

В данной структуре у нас есть главный файл app.scss, в котором мы хотим подключить настройки из файла config.scss и стандартные настройки переменных из файла default_variables.scss. Подключить эти файлы в файл app.scss можно с помощью директивы @import, указав путь к необходимому файлу.

@import "config.scss";
@import "default_variables.scss";

Также при подключении SASS-файлов не обязательно указывать расширение. Компилятор найдёт необходимый файл в указанной директории и подключит его. Значит мы можем немного переписать код и не указывать лишнее расширение.

@import "config";
@import "default_variables";

Порядок подключения файлов в данном случае очень важен. Если внутри файлов config.scss и default_variables.scss будут конфликтующие значения, то возьмётся то, которое было указано последним. Здесь работает то же правило каскадности, что и в CSS: стили, записанные позже, имеют больший приоритет.

Флаг default

Вернёмся к структуре нашего проекта. В default_variables.scss запишем базовые цвета для нашего проекта:

$primary: #A0D788;
$secondary: #71D0A7;
$third: #CCD47D;

Теперь, подключив файл к нашему основному файлу стилей, мы можем использовать эти переменные. Используем цвета в файле app.scss.

@import "config";
@import "default_variables";

.card {
  background: $primary;

  .btn {
    background: $secondary;
  }
}

После компиляции получим следующий CSS-код:

.card {
  background: #A0D788;
}

.card .btn {
  background: #71D0A7;
}

Проходит какое-то время, наш файл с переменными растёт, мы его возможно даже используем как пакет во многих проектах (например, похожий файл есть во фреймворке Bootstrap) и вдруг появилось желание изменить базовый цвет. Это абсолютно нормально, и все проекты ждёт такой этап.

Если мы изменим цвет непосредственно в файле default_variables.scss, то получим необходимый нам результат. Но иногда такой подход не работает. Если мы используем такой файл в виде пакета, который загружается извне, то изменив значение в локальном файле мы не сможем получать обновления. Наш файл уже не идентичен тому, который расположен на общем сервере.

Решить эту проблему помогает специальный флаг !default. Данный флаг выставляется после значения переменной и говорит о том, что значение по умолчанию необходимо использовать только в том случае, если ранее значение переменной нигде не было указано. Проставим для нашей цветовой схемы флаг !default.

$primary: #A0D788!default;
$secondary: #71D0A7!default;
$third: #CCD47D!default;

Теперь, если мы добавим переменную $primary в файл config.scss, то именно её значение будет использовано в качестве фонового цвета для селектора .card.

config.scss

$primary: #09D3AC;

default_variables.scss

$primary: #A0D788!default;
$secondary: #71D0A7!default;
$third: #CCD47D!default;

app.scss

@import "config";
@import "default_variables";

.card {
  background: $primary;

  .btn {
    background: $secondary;
  }
}

После компиляции этого кода мы получим следующий результат:

.card {
  background: #09D3AC;
}

.card .btn {
  background: #71D0A7;
}

Обратите внимание, что итоговое значение $primary появилось именно из файла config.scss, так как в файле с переменными по умолчанию стоит флаг !default.

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты.