Перейти к основному содержанию Перейти к навигации по документам

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

Использование наших исходников Sass даст вам инструменты переменных, карт, миксинов и прочего. В нашей сборке мы повысили точность округления Sass до 6 (по умолчанию 5), чтобы избежать проблем с округлением в браузере.

Структура файлов

По возможности старайтесь избегать изменения «коренных» файлов Bootstrap. Для Sass это значит, что вам следует создать собственную таблицу стилей, импортировать в нее Bootstrap, и уже там изменять и дополнять его стили. Предполагая, что вы используете менеджер пакетов, такой как npm, у вас будет файловая структура, которая выглядит следующим образом:

your-project/
+-- scss
¦   L-- custom.scss
L-- node_modules/
    L-- bootstrap
        +-- js
        L-- scss

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

your-project/
+-- scss
¦   L-- custom.scss
L-- bootstrap/
    +-- js
    L-- scss

Импорт

В своем custom.scss вы импортируете исходники Sass. Тут есть две опции: включить весь Bootstrap или части, вам нужные. Мы советуем делать второе, хотя тут надо знать, что в наших компонентах есть некоторые зависимости и требования. Вам также понадобится включить некоторые скрипты JavaScript для наших плагинов.

// Custom.scss
// Option A: Include all of Bootstrap

@import "../node_modules/bootstrap/scss/bootstrap";
// Custom.scss
// Option B: Include parts of Bootstrap

// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

// Optional
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/code";
@import "../node_modules/bootstrap/scss/grid";

С этой настройкой вы можете изменить любые переменные и карты Sass в вашем файле custom.scss. Вы также можете добавлять части Bootstrap в разделе // Optional при необходимости. В качестве отправной точки мы предлагаем использовать полный стек импорта из нашего файла bootstrap.scss.

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

Каждая переменная Sass в Bootstrap имеет флаг (т.е. предварительно заданную последовательность битов, содержащую значение в двоичном исчислении) !default, что позволяет переопределить значение этой переменной Sass, заданное по умолчанию, в ваших собственных файлах Sass без необходимости копаться в исходниках Bootstrap. «Копипастируйте» переменные как вам необходимо, изменяйте значения, удаляйте !default flag. Если переменная уже была назначена, ее значение не будет переназначено значениями Bootstrap по умолчанию.

Вы найдете полный список переменных Bootstrap в файле scss/_variables.scss. Некоторые переменные имеют значение null, эти переменные не выводят свойство, если они не переопределены в вашей конфигурации.

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

Вот пример кода, изменяющего background-color и color для <body>, при импорте и компиляции Bootstrap через npm:

// Your variable overrides
$body-bg: #000;
$body-color: #111;

// Bootstrap and its default variables
@import "../node_modules/bootstrap/scss/bootstrap";

Повторите при необходимости для любой переменной в Bootstrap, включая глобальные параметры ниже.

Карты и циклы

Bootstrap включает «карты Sass» – массивы парных значений, которые предназначены для облегчения генерации родственных «семейств» CSS. Мы пользуемся картами Sass при работе с цветами, брейкпойнтами сетки и т.д. Как и переменные Sass, все карты Sass включают !default flag и могут быть переназначены и расширены.

Некоторые из карт Sass "слиты" с пустыми картами. Это сделано для возможности легкого расширения данной карты, но слегка усложняет удаление элементов из данной карты.

Изменение карты

К примеру, для изменения существующего в нашей карте $theme-colors цвета, добавьте следующий код в ваш стандартный Sass файл:

$primary: #0074d9;
$danger: #ff4136;

Позже эти переменные будут установлены в Bootstrap $theme-colors:

$theme-colors: (
  "primary": $primary,
  "danger": $danger
);

Добавление в карту

Чтобы добавить новый цвет в $theme-colors, добавьте новый ключ и значение:

// Create your own map
$custom-colors: (
  "custom-color": #900
);

// Merge the maps
$theme-colors: map-merge($theme-colors, $custom-colors);

Удаление из карты

Для удаления цветов из карты $theme-colors или любой другой - map-remove. Имейте в виду, что вы должны вставить его между нашими требованиями и параметрами:

// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

$theme-colors: map-remove($theme-colors, "info", "light", "dark");

// Optional
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
...

Требуемые ключи

В Bootstrap имеются уникальные ключи внутри карт Sass, т.к. мы сами создали и расширяем их. По мере вашей настройки включенных карт вы можете обнаружить ошибки там, где используете специальный ключ карты Sass.

Например, мы используем ключи primary, success и danger из карты $theme-colors для ссылок, кнопок и состояний форм. Изменение значений этих ключей не должно в теории вызвать проблем, но их удаление может вызвать проблемы при компиляции Sass. В таких случаях вам потребуется модифицировать код Sass, который использует эти значения.

Функции

Цвета

В Bootstrap 5 мы отбросили функции color(), theme-color() и gray() потому что значения также доступны как отдельные переменные. Поэтому вместо использования theme-color("primary") теперь вы можете просто использовать переменную $primary.

.custom-element {
  color: $gray-100;
  background-color: $dark;
}

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

@function color-level($color: $primary, $level: 0) {
  $color-base: if($level > 0, $black, $white);
  $level: abs($level);

  @return mix($color-base, $color, $level * $theme-color-interval);
}

На практике вы вызываете функцию и передаете два параметра: имя цвета из $theme-colors (например, primary или danger) и числовой уровень.

.custom-element {
  color: color-level($primary, -10);
}

Контраст цветов

Чтобы соответствовать стандартам WCAG 2.0 для цветового контраста, авторы должны предоставить коэффициент контрастности не менее 4,5:1 за небольшими исключениями.

Дополнительная функция, которую мы включаем в Bootstrap - это функция цветового контраста color-contrast. Он использует алгоритм WCAG 2.0 для расчета порогов контрастности на основе относительной яркости в цветовом пространстве sRGB, чтобы автоматически возвращать светлый-light (#fff), темный-dark (#212529) или черный-black (#000) контрастный цвет на основе указанного базового цвета. Эта функция особенно полезна для миксинов или циклов, где вы генерируете несколько классов.

Например, генерация образцов цветов из нашей карты $theme-colors:

@each $color, $value in $theme-colors {
  .swatch-#{$color} {
    color: color-contrast($value);
  }
}

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

.custom-element {
  color: color-contrast(#000); // returns `color: #fff`
}

Вы также можете задать базовый цвет с помощью наших функций карт цвета:

.custom-element {
  color: color-contrast($dark); // returns `color: #fff`
}

Экранирование SVG

Мы используем функцию escape-svg для того, чтобы не использовать символы <, > и # для фоновых SVG-изображений . При использовании функции escape-svg необходимо указывать URI данных. Эти символы необходимо экранировать, чтобы правильно отображать фоновые изображения в некоторых браузерах.

Сложение и вычитание функций

Мы используем функции сложения add и вычитания subtract чтобы обернуть CSS функцию calc. Основная цель этих функций - избежать ошибок, когда значение “безразмерный” 0 передается в выражение calc. Такие выражения, как calc(10px - 0) возвращают ошибку во всех браузерах, несмотря на математическую корректность.

Пример, в котором действует calc:

$border-radius: .25rem;
$border-width: 1px;

.element {
  // Output calc(.25rem - 1px) is valid
  border-radius: calc($border-radius - $border-width);
}

.element {
  // Output the same calc(.25rem - 1px) as above
  border-radius: subtract($border-radius, $border-width);
}

Пример, где calc неверен:

$border-radius: .25rem;
$border-width: 0;

.element {
  // Output calc(.25rem - 0) is invalid
  border-radius: calc($border-radius - $border-width);
}

.element {
  // Output .25rem
  border-radius: subtract($border-radius, $border-width);
}