Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-26

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

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

3 <ul><li>Тёмный - #303846</li>

4 <li>Светлый - #f7f7f7</li>

5 <li>Основной - #09d3ac</li>

6 <li>Вторичный - #2196f3</li>

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

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

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

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

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

12 <h2>Область видимости</h2>

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

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

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

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

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

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

19 <h2>Именование переменных</h2>

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

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

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

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

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

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

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

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

28 Директивы@useи@forwardзагружают файл стилей и делает доступными его переменные:

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

30 При желании, можно импортировать переменные так, чтобы они были доступны без указания имени файла, в котором определены:

31 Но если в нескольких файлах будет несколько переменных с одним именем, то такой импорт не будет работать сразу для всех этих файлов. Они должны импортировать так, чтобы имена не пересекались:

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

33 Теперь, подключим этот файл к нашему основному файлу с переменными:

34 Здесь используется директива@forward. Она позволяет передать все содержимое файла дальше по цепочке, куда будет импортироваться текущий файл. В нашем случае это позволяет использовать переменные изdefault_variables.scssв файлеapp.scssчерез импортconfig.scss:

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

36 Обратите внимание, что итоговое значение$primaryпоявилось именно из файлаconfig.scss.