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

Sass

Используйте наши исходные файлы 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. У вас есть два варианта: включить весь 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/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/code";
@import "../node_modules/bootstrap/scss/grid";

Имея такую ​​настройку, вы можете начать изменять любые переменные и карты Sass в вашем custom.scss. Вы также можете начать добавлять части Bootstrap в // Optional раздел по мере необходимости. Мы предлагаем использовать полный стек импорта из нашего bootstrap.scss файла в качестве отправной точки.

Значения переменных по умолчанию

Каждая переменная Sass в Bootstrap включает !default флаг, позволяющий переопределить значение переменной по умолчанию в вашем собственном Sass без изменения исходного кода Bootstrap. Скопируйте и вставьте переменные по мере необходимости, измените их значения и снимите !default флаг. Если переменная уже была назначена, она не будет повторно назначена значениями по умолчанию в 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 флаг, и их можно переопределить и расширить.

Некоторые из наших Sass-карт по умолчанию объединены в пустые. Это сделано для того, чтобы упростить расширение данной карты Sass, но за счет этого немного затрудняет удаление элементов с карты.

Изменить карту

Все переменные на $theme-colors карте определены как отдельные переменные. Чтобы изменить существующий цвет на нашей $theme-colors карте, добавьте следующее в свой собственный файл Sass:

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

Later on, theses variables are set in Bootstrap’s $theme-colors map:

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

Добавить на карту

Чтобы добавить новый цвет $theme-colors, добавьте новый ключ и значение:

$theme-colors: (
  "custom-color": #900
);

Удалить с карты

Чтобы удалить цвета с $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, который использует эти значения.

Функции

Цвета

В Bootstrap 5 мы отказались от функций color(), theme-color() и, gray() потому что значения также доступны как отдельные переменные. Поэтому вместо использования theme-color("primary") теперь вы можете просто использовать $primary переменную.

.custom-element { 
  color: $gray-100;
  background-color: $dark;
}

У нас также есть функция для получения определенного уровня цвета. Отрицательные значения уровня сделают цвет светлее, а более высокие - темнее.

@function color-level($color: $primary, $level: 0) { 
  $color-base: if($level > 0, $black, $white);
  $level: abs($level);

  @return mix($color-base, $color, $level * $theme-color-interval);
}

На практике вы должны вызвать функцию и передать два параметра: название цвета $theme-colors (например, основной или опасный) и числовой уровень.

.custom-element { 
  color: color-level($primary, -10);
}

Цветовой контраст

Чтобы соответствовать стандартам доступности 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`
}

Escape SVGG

Мы используем escape-svg функцию, спасаясь от <, > и # символов для SVG фоновых изображений.

Функции сложения и вычитания

Мы используем add и subtract функцию , чтобы обернуть CSS calc функцию. Основная цель этих функций - избежать ошибок, когда в выражение передается «безразмерное» 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);
}