Сас
Искористете ги нашите изворни датотеки 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";
// 4. Include any optional Bootstrap components as you like
@import "../node_modules/bootstrap/scss/root";
@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";
// 5. 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";
// Optional Bootstrap components here
@import "../node_modules/bootstrap/scss/root";
@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";
$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";
// 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 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
}
}