Bootstrap Sass
Файловая структура
По возможности избегайте изменения основных файлов Bootstrap. Для Sass это означает создание собственной таблицы стилей, которая импортирует Bootstrap, чтобы вы могли изменять и расширять ее. Предполагая, что вы используете менеджер пакетов, такой как npm, у вас будет файловая структура, которая выглядит следующим образом:
your-project/
├── scss/
│ └── custom.scss
└── node_modules/
│ └── bootstrap/
│ ├── js/
│ └── scss/
└── index.htmlЕсли вы загрузили исходные файлы и не используете менеджер пакетов, вам захочется вручную создать что-то похожее на эту структуру, сохранив исходные файлы Bootstrap отдельно от ваших собственных.
your-project/
├── scss/
│ └── custom.scss
├── bootstrap/
│ ├── js/
│ └── scss/
└── index.htmlИмпорт
В вашем custom.scss вы импортируете исходные файлы Sass Bootstrap. У вас есть два варианта: включить все файлы Bootstrap или выбрать нужные вам части. Мы рекомендуем последнее, хотя имейте в виду, что у наших компонентов есть некоторые требования и зависимости. Вам также потребуется включить некоторый JavaScript для наших плагинов.
// Custom.scss
// Вариант А: включить весь Bootstrap
// Включите сюда любые переопределения переменных по умолчанию (хотя функции будут недоступны)
@import "../node_modules/bootstrap/scss/bootstrap";
// Затем добавьте сюда дополнительный пользовательский код// Custom.scss
// Вариант Б: включить часть Bootstrap
// 1. Сначала подключите функции (чтобы вы могли манипулировать цветами, SVG, вычислениями и т. д.)
@import "../node_modules/bootstrap/scss/functions";
// 2. Включите сюда любые переопределения переменных по умолчанию
// 3. Включите остальные необходимые таблицы стилей Bootstrap (включая любые отдельные таблицы стилей цветового режима)
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/variables-dark";
// 4. Включите сюда любые переопределения карты по умолчанию
// 5. Включаем оставшиеся необходимые части
@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 в качестве CSS в браузере, вам нужен компилятор Sass. Sass поставляется в виде пакета CLI, но вы также можете скомпилировать его с помощью других инструментов сборки, таких как Gulp или Webpack, или с помощью приложений с графическим интерфейсом. Некоторые IDE также имеют встроенные компиляторы Sass или загружаемые расширения.
Нам нравится использовать CLI для компиляции нашего Sass, но вы можете использовать любой метод, который вам больше нравится. Из командной строки выполните следующее:
# Установите Sass глобально
npm install -g sass
# Следите за изменениями в своем пользовательском Sass и скомпилируйте его в CSS.
sass --watch ./scss/custom.scss ./css/custom.cssУзнайте больше о ваших возможностях на sass-lang.com/install и компиляции с помощью VS Code.
Включая
После того, как ваш CSS будет скомпилирован, вы можете включить его в свои HTML-файлы. Внутри вашего index.html вы захотите включить свой скомпилированный CSS-файл. Обязательно обновите путь к вашему скомпилированному CSS-файлу, если вы его изменили.
Переменные по умолчанию
Каждая переменная Sass в Bootstrap включает флаг !default, позволяющий переопределять значение переменной по умолчанию в вашем собственном Sass без изменения исходного кода Bootstrap. Скопируйте и вставьте переменные по мере необходимости, измените их значения и снимите флаг !default. Если переменной уже присвоены значения по умолчанию в Bootstrap, они не будут переназначены.
Полный список переменных Bootstrap вы найдете в scss/_variables.scss. Для некоторых переменных установлено значение null, эти переменные не выводят свойство, если они не переопределены в вашей конфигурации.
Переопределения переменных должны выполняться после импорта наших функций, но перед остальным импортом.
Вот пример, который изменяет background-color и color на <body> при импорте и компиляции Bootstrap через npm:
При необходимости повторите для любой переменной в Bootstrap, включая приведенные ниже глобальные параметры.
Карты и циклы
Bootstrap включает в себя несколько карт Sass, пар ключ-значение, которые упрощают создание семейств связанных CSS. Мы используем карты Sass для наших цветов, точек останова сетки и многого другого. Как и переменные Sass, все сопоставления Sass включают флаг !default и могут быть переопределены и расширены.
Некоторые из наших карт Sass по умолчанию объединены в пустые. Это сделано для того, чтобы обеспечить легкое расширение данной карты Sass, но за счет этого немного усложняется удаление объектов с карты.
Изменить карту
Все переменные на $theme-colors карте определены как автономные переменные. Чтобы изменить существующий цвет на нашей $theme-colors карте, добавьте следующее в свой пользовательский файл Sass:
Позже эти переменные будут установлены в Bootstrap $theme-colors map:
Добавить на карту
Добавьте новые цвета к $theme-colors или любой другой карте, создав новую карту Sass с вашими пользовательскими значениями и объединив ее с исходной картой. В этом случае мы создадим новую $custom-colors карту и объединим ее с $theme-colors.
Удалить с карты
Чтобы удалить цвета с $theme-colors или любой другой карты, используйте map-remove. Имейте в виду, что вы должны вставить $theme-colors между нашими требованиями сразу после его определения в variables и перед его использованием в maps:
Необходимые ключи
Bootstrap предполагает наличие некоторых определенных ключей в картах Sass, которые мы использовали, и расширяет их самостоятельно. При настройке включенных карт могут возникать ошибки, связанные с использованием ключа конкретной карты Sass.
Например, мы используем primary, success и danger ключи из $theme-colors для ссылок, кнопок и состояний формы. Замена значений этих ключей не должна вызывать проблем, но их удаление может вызвать проблемы с компиляцией Sass. В этих случаях вам потребуется изменить код Sass, который использует эти значения.
Функции
Цвета
Рядом с картами Sass, которые у нас есть, цвета темы также можно использовать в качестве автономных переменных, например $primary.
Вы можете осветлить или затемнить цвета с помощью функций Bootstrap tint-color() и shade-color(). Эти функции будут смешивать цвета с черным или белым, в отличие от собственных функций Sass lighten() и darken(), которые изменяют яркость на фиксированную величину, что часто не приводит к желаемому эффекту.
На практике вы бы вызвали функцию и передали параметры цвета и веса.
Цветовой контраст
Чтобы соответствовать требованиям к контрастности Рекомендаций по обеспечению доступности веб-контента (WCAG), авторы должны обеспечить минимальный цветовой контраст текста 4,5:1 и минимальный нетекстовый цветовой контраст 3:1, за очень редкими исключениями.
Чтобы помочь с этим, мы включили в Bootstrap функцию color-contrast. Он использует алгоритм коэффициента контрастности WCAG для вычисления пороговых значений контрастности на основе относительной яркости в sRGB цветовом пространстве, чтобы автоматически возвращать светлый (#fff), темный (#212529) или черный (#000) контрастный цвет на основе указанного базового цвета. Эта функция особенно полезна для миксинов или циклов, где вы создаете несколько классов.
Например, для создания образцов цветов из нашей $theme-colors карты:
Его также можно использовать для одноразового использования контраста:
Вы также можете указать базовый цвет с помощью наших функций цветовой карты:
Escape SVG
Мы используем escape-svg функцию для экранирования символов <, > и # для фоновых изображений SVG. При использовании функции escape-svg URI данных должны быть заключены в кавычки.
Функции сложения и вычитания
Мы используем функции add и subtract для переноса функции CSS calc. Основная цель этих функций - избежать ошибок при передаче “безразмерного” 0 значения в calc выражение. Выражения типа calc(10px - 0) будут возвращать ошибку во всех браузерах, несмотря на то, что они математически корректны.
Пример, в котором calc является допустимым:
Пример, когда вычисление недопустимо:
Миксины
В нашем scss/mixins/ каталоге содержится множество миксинов, которые поддерживают части Bootstrap, а также могут быть использованы в вашем собственном проекте.
Цветовые схемы
Доступен сокращенный вариант для prefers-color-scheme медиа-запроса с поддержкой light, dark и пользовательских цветовых схем. Смотрите документацию по цветовым режимам для получения информации о нашем сочетании цветовых режимов.