Articles
Введение в SASS/SCSS
Флаг `!default` в SASS

Флаг `!default` в SASS

В этой статье объясняется флаг !default в SASS.

Мы подробно объясним флаг !default и покажем, как использовать его на практических примерах.

YouTube Video

Флаг !default в SASS

Флаг !default в SASS — важный инструмент для повышения модульности и повторного использования таблиц стилей. С помощью этого флага можно задавать значения по умолчанию для переменных, при этом значения, определённые в других местах, будут иметь приоритет. Здесь мы подробно рассмотрим флаг !default и покажем его использование на практических примерах.

Флаг !default — это особенность SASS, предназначенная для задания значений переменных по умолчанию. Добавляя этот флаг, достигается следующий эффект:.

  • Указание значений по умолчанию Значение устанавливается только в случае, если переменная не определена в другом месте.

  • Управление приоритетом Если переменная уже определена, её значение не будет перезаписано.

Эта функция особенно полезна при создании модулей и библиотек. Пользователи могут задать свои значения, но если они не заданы, будут использоваться значения по умолчанию.

Базовый пример

Следующий код демонстрирует базовое использование флага !default.

1// _variables.scss
2$primary-color: blue !default;
  • Определение переменной по умолчанию $primary-color с использованием флага !default.
1// main.scss
2@use 'variables' with (
3    $primary-color: red
4);
5
6body {
7    background-color: variables.$primary-color;
8}
  • Импорт переменных с помощью @use и переопределение $primary-color с помощью with.

Результирующий CSS 

1body {
2    background-color: red;
3}
  • В этом примере, так как $primary-color установлен в main.scss как red, значение blue, определённое в _variables.scss, использоваться не будет.

Когда переменная не определена

Если переменная не определена в main.scss, будет использовано значение по умолчанию.

1// main.scss
2@use 'variables';
3
4body {
5    background-color: variables.$primary-color;
6}
  • Поскольку переменная импортируется без переопределения, применяется значение по умолчанию blue для $primary-color, определённое в _variables.scss.

Результирующий CSS 

1body {
2    background-color: blue;
3}

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

Использование !default внутри модулей позволяет гибко настраивать значения.

1// _variables.scss
2$primary-color: blue !default;
3$button-color: blue !default;
  • Определение $primary-color и $button-color с помощью флага !default.
1// _buttons.scss
2@use 'variables';
3
4.button {
5    color: variables.$button-color;
6}
  • Импорт модуля variables и задание цвета для .button с помощью переменной $button-color.
1// main.scss
2@use 'variables' with (
3    $button-color: orange
4);
5
6@use 'buttons';
  • Использование @use с with для переопределения $button-color на orange и использование модуля buttons.

Результирующий CSS 

1.button {
2    color: orange;
3}
  • Таким образом, модули предоставляют значения по умолчанию, учитывая пользовательские настройки.

Важные моменты

При использовании флага !default следует учитывать следующие моменты:.

  • Выбор подходящих значений по умолчанию Значения по умолчанию следует выбирать так, чтобы они покрывали стандартные сценарии использования.

  • Осознанный дизайн Используйте последовательные имена переменных и избегайте конфликтов с другими модулями.

  • Проверка порядка переопределений Чтобы флаг !default работал как задумано, порядок переопределения переменных должен быть правильно организован.

Практические примеры

Переключение тем

Например, при разработке библиотеки с поддержкой тем можно использовать !default для предоставления настраиваемых значений по умолчанию.

1// _theme.scss
2$background-color: white !default;
3$text-color: black !default;
4
5body {
6    background-color: $background-color;
7    color: $text-color;
8}
  • Определение $background-color и $text-color с помощью флага !default для темы и применение их к body.
1// main.scss
2@use 'theme' with (
3    $background-color: #f0f0f0
4);
  • Настройка темы путем переопределения $background-color с помощью @use и with.

Результирующий CSS 

1body {
2    background-color: #f0f0f0;
3    color: black;
4}

Переиспользуемые компоненты

В переиспользуемом компоненте кнопки можно задать стили по умолчанию, при этом разрешив пользователям переопределять цвет.

 1// _buttons.scss
 2$button-bg: #007bff !default;
 3$button-color: #ffffff !default;
 4
 5.button {
 6    background-color: $button-bg;
 7    color: $button-color;
 8    padding: 0.5em 1em;
 9    border-radius: 4px;
10}
  • Определение фонового цвета и цвета текста для кнопок по умолчанию с использованием !default и применение стилей.
1// main.scss
2@use 'buttons' with (
3    $button-bg: #28a745
4);
  • Настройка цвета кнопки путем переопределения $button-bg с помощью @use и with.

Результирующий CSS 

1.button {
2    background-color: #28a745;
3    color: #ffffff;
4    padding: 0.5em 1em;
5    border-radius: 4px;
6}

Резюме по флагу !default

Флаг !default в SASS — это мощный инструмент при создании модулей и библиотек. Он повышает повторное использование и обеспечивает гибкую настройку.

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

YouTube Video

Переменные SASSФлаг `!global` в SASS