Перейти до основного вмісту Перейти до навігації документами
Check
in English

Сасс

Використовуйте наші вихідні файли 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";

// 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,successdanger клавіші , та $theme-colorsдля посилань, кнопок і станів форм. Заміна значень цих ключів не повинна викликати проблем, але їх видалення може спричинити проблеми компіляції Sass. У цих випадках вам потрібно буде змінити код Sass, який використовує ці значення.

Функції

Кольори

Next to the Sass maps we have, theme colors can also be used as standalone variables, like $primary.

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

You can lighten or darken colors with Bootstrap’s tint-color() and shade-color() functions. These functions will mix colors with black or white, unlike Sass’ native lighten() and darken() functions which will change the lightness by a fixed amount, which often doesn’t lead to the desired effect.

// 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));
}

In practice, you’d call the function and pass in the color and weight parameters.

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

.custom-element-2 {
  color: shade-color($danger, 30%);
}

Color contrast

In order to meet the Web Content Accessibility Guidelines (WCAG) contrast requirements, authors must provide a minimum text color contrast of 4.5:1 and a minimum non-text color contrast of 3:1, with very few exceptions.

To help with this, we included the color-contrast function in Bootstrap. It uses the WCAG contrast ratio algorithm for calculating contrast thresholds based on relative luminance in an sRGB color space to automatically return a light (#fff), dark (#212529) or black (#000) contrast color based on the specified base color. This function is especially useful for mixins or loops where you’re generating multiple classes.

For example, to generate color swatches from our $theme-colors map:

@each $color, $value in $theme-colors {
  .swatch-#{$color} {
    color: color-contrast($value);
  }
}

It can also be used for one-off contrast needs:

.custom-element {
  color: color-contrast(#000); // returns `color: #fff`
}

You can also specify a base color with our color map functions:

.custom-element {
  color: color-contrast($dark); // returns `color: #fff`
}

Escape SVG

We use the escape-svg function to escape the <, > and # characters for SVG background images. When using the escape-svg function, data URIs must be quoted.

Add and Subtract functions

We use the add and subtract functions to wrap the CSS calc function. The primary purpose of these functions is to avoid errors when a “unitless” 0 value is passed into a calc expression. Expressions like calc(10px - 0) will return an error in all browsers, despite being mathematically correct.

Example where the calc is valid:

$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);
}

Example where the calc is invalid:

$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);
}

Mixins

Our scss/mixins/ directory has a ton of mixins that power parts of Bootstrap and can also be used across your own project.

Color schemes

Доступний скорочений міксин для 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
  }
}