Переменные SASS

В этой статье объясняются переменные SASS.

Мы подробно объясним переменные SASS и шаг за шагом рассмотрим их практическое использование.

YouTube Video

Переменные SASS

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

Что такое переменные SASS?

Переменные SASS позволяют хранить значения, такие как цвета, размеры шрифтов и отступы, которые часто используются в CSS, что даёт возможность управлять ими централизованно.

Используя переменные, вы можете легко изменять стили и улучшать читаемость кода.

Как записывать переменные

Переменные можно записывать следующим образом.

1// Variable syntax
2//$variable-name: value;
3$primary-color: #3498db;

• Имя переменной должно начинаться с символа $.
• variable-name — это имя переменной. Рекомендуется давать переменной понятные и описательные имена.
• value — это значение, присвоенное переменной.

Базовое использование переменных

Ниже приведён простой пример переменной SASS.

 1// Variable definition
 2$primary-color: #3498db;
 3$secondary-color: #2ecc71;
 4$base-font-size: 16px;
 5
 6// Variable usage
 7body {
 8    font-size: $base-font-size;
 9    color: $primary-color;
10    background-color: $secondary-color;
11}

• После определения переменной, например $primary-color, вы можете использовать одно и то же значение столько раз, сколько нужно.
• Если потребуется изменить значение, достаточно изменить определение переменной, что повышает удобство сопровождения кода.

Созданный CSS-вывод

1body {
2    font-size: 16px;
3    color: #3498db;
4    background-color: #2ecc71;
5}

Использование переменных внутри вложенности

Сочетание вложенности SASS с переменными помогает лучше организовать ваш код и облегчает его поддержку.

 1@use "sass:color";
 2
 3// Variable definition
 4$button-bg: #e74c3c;
 5$button-color: #fff;
 6$button-padding: 10px 20px;
 7
 8.button {
 9    background-color: $button-bg;
10    color: $button-color;
11    padding: $button-padding;
12
13    &:hover {
14        background-color: color.adjust($button-bg, $lightness: -10%);
15    }
16}

• Вы можете использовать переменные внутри вложенных селекторов.
• Комбинируя переменные, вы можете добиться гибкого оформления, например, сделать цвет на 10% темнее с помощью функции color.adjust.

Созданный CSS-вывод

1.button {
2    background-color: #e74c3c;
3    color: #fff;
4    padding: 10px 20px;
5}
6
7.button:hover {
8    background-color: #c0392b;
9}

Переменные со значениями по умолчанию

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

1// Set default value
2$font-size: 14px !default;
3
4// Define the variable in another file
5$font-size: 16px;
6
7p {
8    font-size: $font-size;
9}

• Добавив !default, переменная не будет перезаписываться, если она уже определена.
• Это полезно при командной разработке или для общих настроек проекта.

Созданный CSS-вывод

1p {
2    font-size: 16px;
3}

Область видимости переменных

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

1. Глобальная область видимости

1$global-color: #ff6347;
2
3.header {
4    color: $global-color;
5}

• Переменные в глобальной области видимости доступны во всём файле.

2. Локальная область видимости

1.card {
2    $card-bg: #f0f0f0;
3    background-color: $card-bg;
4}
5
6.button {
7    // Error: $card-bg cannot be used
8    background-color: $card-bg;
9}

• Переменные в локальной области видимости доступны только внутри определённой области вложенности или файла.

Использование переменных в вычислениях

Переменные SASS также можно использовать в вычислениях. Вычисления можно выполнять как с единичными величинами, так и с цветами.

 1@use "sass:color";
 2
 3$base-padding: 10px;
 4$double-padding: $base-padding * 2;
 5
 6.container {
 7    padding: $double-padding;
 8}
 9
10$main-color: #3498db;
11$lighter-color: color.adjust($main-color, $lightness: 20%);
12
13h1 {
14    color: $lighter-color;
15}

Созданный CSS-вывод

1.container {
2    padding: 20px;
3}
4
5h1 {
6    color: #5dade2;
7}

• Использование переменных для настройки цветов или вычислений отступов повышает удобство сопровождения кода.

Резюме

Переменные SASS — неотъемлемая функция для эффективного управления и поддержки CSS.

Использование переменных SASS помогает поддерживать единый стиль во всём проекте и облегчает внесение изменений.

Вы можете следовать этой статье, используя Visual Studio Code на нашем YouTube-канале. Пожалуйста, также посмотрите наш YouTube-канал.

YouTube Video