Сасс
Використовуйте наші вихідні файли 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ви імпортуєте вихідні файли Sass Bootstrap. У вас є два варіанти: включити весь 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";
@import "../node_modules/bootstrap/scss/root";
// 4. Include any optional Bootstrap CSS 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";
// 5. Optionally include utilities API last to generate classes based on the Sass map in `_utilities.scss`
@import "../node_modules/bootstrap/scss/utilities/api";
// 6. 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";
@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 містить кілька карт 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";
@import "../node_modules/bootstrap/scss/root";
$theme-colors: map-remove($theme-colors, "info", "light", "dark");
// 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 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для обгортання функції 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);
}
Міксини
У нашому 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
}
}