дързък

Използвайте нашите изходни 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, successи dangerот $theme-colorsза връзки, бутони и състояния на формуляри. Подмяната на стойностите на тези ключове не трябва да създава проблеми, но премахването им може да причини проблеми при компилирането на Sass. В тези случаи ще трябва да промените Sass кода, който използва тези стойности.

Функции

Цветове

Освен картите на Sass, които имаме, цветовете на темата също могат да се използват като самостоятелни променливи, като $primary.

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

Можете да изсветлите или потъмните цветовете с Bootstrap tint-color()и shade-color()функциите. lighten()Тези функции ще смесват цветовете с черно или бяло, за разлика от естествените и функции на Sass, 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за обвиване на 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
  }
}