Сасс

Используйте наши исходные файлы 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";

// 4. Include any default map overrides here

// 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. Optionally include any other parts as needed
@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. Optionally include utilities API last to generate classes based on the Sass map in `_utilities.scss`
@import "../node_modules/bootstrap/scss/utilities/api";

// 8. 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/maps";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";

// Optional Bootstrap components here
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
// etc

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

Начните работу с Bootstrap через npm с нашим стартовым проектом! Перейдите в репозиторий шаблонов twbs /bootstrap-npm-starter , чтобы узнать, как создать и настроить Bootstrap в своем собственном проекте npm. Включает компилятор Sass, Autoprefixer, Stylelint, PurgeCSS и значки 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. Имейте в виду, что вы должны вставить $theme-colorsмежду нашими требованиями сразу после его определения variablesи до его использования в maps:

// 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и для ссылок, кнопок и состояний формы. Замена значений этих ключей не должна вызвать проблем, но их удаление может вызвать проблемы с компиляцией 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) , авторы должны обеспечить минимальную цветовую контрастность текста 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`
}

Побег из 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
  }
}