Sass
Используйте наши исходные файлы Sass для настройки переменных, карт, миксинов и функции, которые помогут быстрее создавать и настраивать ваши проекты.
Использование наших исходников Sass даст вам инструменты переменных, карт, миксинов и многого другого.
Структура файлов
По возможности избегайте изменения файлов ядра 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. У Вас есть два варианта: включить весь Bootstrap или выбрать нужные Вам части. Мы поощряем последнее, но имейте в виду, что между нашими компонентами есть некоторые требования и зависимости. Вам также необходимо будет включить некоторый JavaScript для наших плагинов.
// Custom.scss
// Вариант А: Включите весь Bootstrap
// Include any default variable overrides here (though functions won't be available)
@import "../node_modules/bootstrap/scss/bootstrap";
// Then add additional custom code here
// Custom.scss
// Вариант Б. Включите части Bootstrap
// 1. Сначала включите функции (чтобы Вы могли управлять цветами, SVG, вычислением и т.д.)
@import "../node_modules/bootstrap/scss/functions";
// 2. Включите сюда любые переопределения переменных по умолчанию
// 3. Включите оставшуюся часть необходимых таблиц стилей Bootstrap
@import "../node_modules/bootstrap/scss/variables";
// 4. Включите сюда любые переопределения карт по умолчанию
// 5. Include remainder of required parts
@import "../node_modules/bootstrap/scss/maps";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";
// 6. При необходимости включите любые другие части
@import "../node_modules/bootstrap/scss/utilities";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/containers";
@import "../node_modules/bootstrap/scss/grid";
@import "../node_modules/bootstrap/scss/helpers";
// 7. При желании добавьте API утилит в последнюю очередь, чтобы генерировать классы на основе карты Sass в `_utilities.scss`
@import "../node_modules/bootstrap/scss/utilities/api";
// 8. Добавьте сюда дополнительный пользовательский код
С этой настройкой, Вы можете приступить к изменению любых переменных и карт Sass в Вашем custom.scss. Вы также можете начать добавлять части Bootstrap в разделе // Optional по мере необходимости. Мы предлагаем использовать полный стек импорта из нашего файла bootstrap.scss в качестве отправной точки.
Значения переменных по умолчанию
Каждая переменная Sass в Bootstrap включает флаг !default позволяющий переопределить значение переменной по умолчанию в Вашем собственном Sass без изменения исходного кода Bootstrap. Скопируйте и вставьте переменные по мере необходимости, измените их значения и удалите флаг !default. Если переменная уже была назначена, она не будет повторно назначена значениями по умолчанию в Bootstrap.
Вы найдете полный список переменных Bootstrap в scss/_variables.scss. Некоторые переменные имеют значение null, эти переменные не выводят свойство, если они не переопределены в Вашей конфигурации.
Переопределения переменных должны происходить после импорта наших функций, но до остального импорта.
Вот пример, который меняет background-color и color для <body> при импорте и компиляции Bootstrap через npm:
// Обязательные
@import "../node_modules/bootstrap/scss/functions";
// Переопределения переменных по умолчанию
$body-bg: #000;
$body-color: #111;
// Обязательные
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/maps";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";
// Дополнительные компоненты Bootstrap здесь
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
// etc
При необходимости повторите для любой переменной в Bootstrap, включая глобальные параметры ниже.
Карты и циклы
Bootstrap включает в себя несколько карт Sass, пар ключ-значение, которые упрощают создание семейств связанных CSS. Мы используем карты Sass для наших цветов, контрольных точек сетки и многого другого. Как и переменные Sass, все карты Sass включают флаг ! Default и могут быть переопределены и расширены.
Некоторые из наших Sass-карт по умолчанию объединены в пустые. Это сделано для того, чтобы упростить расширение данной карты Sass, но это происходит за счет того, что удаление элементов с карты становится немного сложнее.
Изменение карты
Все переменные в карте $theme-colors определены как отдельные переменные. Чтобы изменить существующий цвет в нашей карте $theme-colors, добавьте следующее в свой пользовательский файл Sass:
$primary: #0074d9;
$danger: #ff4136;
Позже эти переменные устанавливаются в карте Bootstrap $theme-colors:
$theme-colors: (
"primary": $primary,
"danger": $danger
);
Добавление на карту
Добавьте новые цвета в $theme-colors или любую другую карту, создав новую карту Sass с Вашими пользовательскими значениями и объединяя ее с исходной картой. В этом случае мы создадим новую карту $custom-colors и объединим ее с $theme-colors.
// Создайте свою карту
$custom-colors: (
"custom-color": #900
);
// Объедините карты
$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";
$theme-colors: map-remove($theme-colors, "info", "light", "dark");
@import "../node_modules/bootstrap/scss/maps";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";
// Optional
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
// etc
Обязательные ключи
Bootstrap предполагает наличие определенных ключей в картах Sass, которые мы использовали, и расширяем их сами. Когда Вы настраиваете включенные карты, Вы можете столкнуться с ошибками, когда используется конкретный ключ карты Sass.
Например, мы используем ключи primary, success и danger из $theme-colors для ссылок, кнопок и состояний формы. Замена значений этих ключей не должна вызывать проблем, но их удаление может вызвать проблемы с компиляцией Sass. В этих случаях вам нужно будет изменить код Sass, который использует эти значения.
Функции
Цвета
Наряду с имеющимися у нас Sass maps цвета темы также могут использоваться как отдельные переменные, такие как $primary.
.custom-element {
color: $gray-100;
background-color: $dark;
}
Вы можете осветлить или затемнить цвета с помощью функций Bootstrap tint-color() и shade-color(). Эти функции будут смешивать цвета с черным или белым, в отличие от собственных функций Sass lighten() и darken(), которые изменяют яркость на фиксированную величину, что часто не приводит к желаемому эффекту.
// Tint a color: mix a color with white
@function tint-color($color, $weight) {
@return mix(white, $color, $weight);
}
// Shade a color: mix a color with black
@function shade-color($color, $weight) {
@return mix(black, $color, $weight);
}
// Shade the color if the weight is positive, else tint it
@function shift-color($color, $weight) {
@return if($weight > 0, shade-color($color, $weight), tint-color($color, -$weight));
}
На практике Вы должны вызвать функцию и передать параметры цвета и веса.
.custom-element {
color: tint-color($primary, 10%);
}
.custom-element-2 {
color: shade-color($danger, 30%);
}
Цветовой контраст
Чтобы соответствовать требованиям к контрастности Руководства по обеспечению доступности веб-контента (WCAG) авторы должны обеспечить минимальную цветовую контрастность текста не менее 4.5:1 и минимальную контрастность нетекстовых цветов 3:1, за очень небольшими исключениями.
Чтобы помочь с этим, мы включили функцию цветового контраста color-contrast в Bootstrap. Он использует алгоритм коэффициента контрастности WCAG для вычисления пороговых значений контрастности на основе относительной яркости в цветовом пространстве 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 SVG
Мы используем функцию escape-svg для экранирования символов <, > и # для фоновых изображений SVG. При использовании функции escape-svg необходимо указывать URI данных.
Функции сложения и вычитания
Мы используем функции add и subtract чтобы обернуть CSS функцию calc. Основная цель этих функций - избежать ошибок, когда “безразмерное” значение 0 передается в выражение calc. Выражения вроде calc(10px - 0) вернут ошибку во всех браузерах, несмотря на то, что они математически верны.
Пример, где расчет действителен:
$border-radius: .25rem;
$border-width: 1px;
.element {
// Вывод calc(.25rem - 1px) действителен
border-radius: calc($border-radius - $border-width);
}
.element {
// Выведет то же, что и выше calc(.25rem - 1px)
border-radius: subtract($border-radius, $border-width);
}
Пример неверного расчета:
$border-radius: .25rem;
$border-width: 0;
.element {
// Вывод calc(.25rem - 0) недействителен
border-radius: calc($border-radius - $border-width);
}
.element {
// Вывод .25rem
border-radius: subtract($border-radius, $border-width);
}
Миксины
В нашем каталоге scss/mixins/ есть множество миксинов, которые являются основными частями Bootstrap, а также могут использоваться в вашем собственном проекте.
Цветовые схемы
Доступен сокращенный миксин для медиа-запроса prefers-color-scheme с поддержкой light, dark и пользовательских цветовых схем.
@mixin color-scheme($name) {
@media (prefers-color-scheme: #{$name}) {
@content;
}
}
.custom-element {
@include color-scheme(dark) {
// Вставьте сюда стили темного режима
}
@include color-scheme(custom-named-scheme) {
// Вставьте здесь собственные стили цветовой схемы
}
}