Сасс
Используйте наши исходные файлы Sass, чтобы воспользоваться преимуществами переменных, карт, миксинов и функций, которые помогут вам быстрее создавать и настраивать свой проект.
Используйте наши исходные файлы Sass, чтобы воспользоваться преимуществами переменных, карт, миксинов и многого другого.
Структура файла
По возможности избегайте изменения основных файлов 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файле вы импортируете исходные файлы Bootstrap Sass. У вас есть два варианта: включить весь Bootstrap или выбрать нужные вам части. Мы рекомендуем последнее, хотя имейте в виду, что существуют некоторые требования и зависимости между нашими компонентами. Вам также потребуется включить JavaScript для наших плагинов.
// Custom.scss
// Option A: Include all of 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
// Option B: Include parts of Bootstrap
// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
@import "../node_modules/bootstrap/scss/functions";
// 2. Include any default variable overrides here
// 3. Include remainder of required Bootstrap stylesheets
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";
// 4. Include any optional Bootstrap components as you like
@import "../node_modules/bootstrap/scss/root";
@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";
// 5. Add additional custom code here
С этой настройкой вы можете начать изменять любые переменные и карты 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:
// Required
@import "../node_modules/bootstrap/scss/functions";
// Default variable overrides
$body-bg: #000;
$body-color: #111;
// Required
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";
// Optional Bootstrap components here
@import "../node_modules/bootstrap/scss/root";
@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;
Позже эти переменные устанавливаются в $theme-colorsкарте Bootstrap:
$theme-colors: (
"primary": $primary,
"danger": $danger
);
Добавить на карту
Добавьте новые цвета к $theme-colorsили любой другой карте, создав новую карту Sass с вашими пользовательскими значениями и объединив ее с исходной картой. В этом случае мы создадим новую $custom-colorsкарту и объединим ее с $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";
// etc
Необходимые ключи
Bootstrap предполагает наличие определенных ключей в картах Sass, которые мы использовали и расширяли сами. При настройке включенных карт вы можете столкнуться с ошибками при использовании определенного ключа карты Sass.
Например, мы используем клавиши primary, successи для ссылок, кнопок и состояний формы. Замена значений этих ключей не должна вызвать проблем, но их удаление может вызвать проблемы с компиляцией Sass. В этих случаях вам нужно будет изменить код Sass, который использует эти значения.danger$theme-colors
Функции
Цвета
Наряду с картами Sass , которые у нас есть, цвета темы также можно использовать как отдельные переменные, например $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 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`
}
Побег из SVG
Мы используем эту escape-svgфункцию для экранирования <символов >и #для фоновых изображений SVG. При использовании escape-svgфункции URI данных необходимо заключать в кавычки.
Функции сложения и вычитания
Мы используем функции addи subtract, чтобы обернуть calcфункцию CSS. Основная цель этих функций — избежать ошибок при передаче «безразмерного» 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);
}
Миксины
В нашем scss/mixins/каталоге есть множество примесей, которые являются частью Bootstrap, а также могут использоваться в вашем собственном проекте.
Цветовые схемы
Доступен сокращенный миксин для prefers-color-schemeмедиа-запроса с поддержкой light, darkи пользовательских цветовых схем.
@mixin color-scheme($name) {
@media (prefers-color-scheme: #{$name}) {
@content;
}
}
.custom-element {
@include color-scheme(dark) {
// Insert dark mode styles here
}
@include color-scheme(custom-named-scheme) {
// Insert custom color scheme styles here
}
}