Используйте наши исходные файлы Sass, чтобы использовать переменные, карты, миксины и многое другое. В нашей сборке мы увеличили точность округления Sass до 6 (по умолчанию 5), чтобы предотвратить проблемы с округлением в браузере.
Файловая структура
По возможности избегайте изменения файлов ядра Bootstrap. Для Sass это означает создание собственной таблицы стилей, которая импортирует Bootstrap, чтобы вы могли изменять и расширять ее. Предполагая, что вы используете менеджер пакетов, такой как npm, у вас будет файловая структура, которая выглядит следующим образом:
your-project/
├── scss
│ └── custom.scss
└── node_modules/
└── bootstrap
├── js
└── scss
Если вы загрузили наши исходные файлы и не используете диспетчер пакетов, вам нужно вручную настроить что-то похожее на эту структуру, сохраняя исходные файлы Bootstrap отдельно от ваших собственных.
your-project/
├── scss
│ └── custom.scss
└── bootstrap/
├── js
└── scss
Импорт
В вашем custom.scss
вы будете импортировать исходные файлы Sass для Bootstrap. У вас есть два варианта: включить весь 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 без изменения исходного кода Bootstrap. Скопируйте и вставьте переменные по мере необходимости, измените их значения и снимите !default
флаг. Если переменная уже была назначена, она не будет повторно назначена значениями по умолчанию в 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
флаг, и их можно переопределить и расширить.
Некоторые из наших Sass-карт по умолчанию объединены в пустые. Это сделано для того, чтобы упростить расширение данной карты Sass, но за счет этого немного затрудняет удаление элементов с карты.
Изменить карту
Все переменные на $theme-colors
карте определены как отдельные переменные. Чтобы изменить существующий цвет на нашей $theme-colors
карте, добавьте следующее в свой собственный файл Sass:
$primary: #0074d9;
$danger: #ff4136;
Later on, theses variables are set in Bootstrap’s $theme-colors
map:
$theme-colors: (
"primary": $primary,
"danger": $danger
);
Добавить на карту
Чтобы добавить новый цвет $theme-colors
, добавьте новый ключ и значение:
$theme-colors: (
"custom-color": #900
);
Удалить с карты
Чтобы удалить цвета с $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
(например, основной или опасный) и числовой уровень.
.custom-element {
color: color-level($primary, -10);
}
Цветовой контраст
Чтобы соответствовать стандартам доступности WCAG 2.0 для цветового контраста , авторы должны обеспечить коэффициент контрастности не менее 4,5: 1 , за очень немногими исключениями.
Дополнительная функция, которую мы включаем в Bootstrap, - это функция цветового контраста color-contrast
. Он использует алгоритм WCAG 2.0 для расчета пороговых значений контрастности на основе относительной яркости в sRGB
цветовом пространстве для автоматического возврата светлого (#fff
), темного (#212529
) или черного (#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`
}
Escape SVGG
Мы используем escape-svg
функцию, спасаясь от <
, >
и #
символов для SVG фоновых изображений.
Функции сложения и вычитания
Мы используем add
и subtract
функцию , чтобы обернуть CSS calc
функцию. Основная цель этих функций - избежать ошибок, когда в выражение передается «безразмерное» 0
значение calc
. Выражения вроде calc(10px - 0)
вернут ошибку во всех браузерах, несмотря на то, что они математически верны.
Пример, когда расчет действителен:
$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);
}
Пример неверного вычисления:
$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);
}