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

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

Использование наших исходников 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 или части, вам нужные. Мы советуем делать второе, хотя тут надо знать, что в наших компонентах есть некоторые зависимости и требования. Вам также понадобится включить некоторые скрипты 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/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";

С этой настройкой вы можете изменить любые переменные и карты 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 определены как автономные переменные. Для изменения существующего в нашей карте $theme-colors цвета, добавьте следующий код в ваш стандартный Sass файл:

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

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

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

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

Чтобы добавить новый цвет в $theme-colors или любую другую карту, создайте новую Sass с вашими пользовательскими значениями, объединив ее с исходной картой. В этом случае создается новая карта $theme-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";
...

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

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

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

Функции

Цвета

Наряду с имеющимися картами 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, чтобы автоматически возвращать светлый-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);
}