Сас
Выкарыстоўвайце нашы зыходныя файлы 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
, і для спасылак, кнопак і станаў формы. Замена значэнняў гэтых ключоў не павінна выклікаць праблем, але іх выдаленне можа выклікаць праблемы пры кампіляцыі Sass. У гэтых выпадках вам трэба будзе змяніць код Sass, які выкарыстоўвае гэтыя значэнні.danger
$theme-colors
Функцыі
Колеры
Побач з картамі Sass , якія ў нас ёсць, колеры тэмы таксама можна выкарыстоўваць як аўтаномныя зменныя, напрыклад $primary
.
.custom-element {
color: $gray-100;
background-color: $dark;
}
Вы можаце асвятліць або прыцьміць колеры з дапамогай tint-color()
функцый shade-color()
Bootstrap. Гэтыя функцыі будуць змешваць колеры з чорным або белым, у адрозненне ад уласных функцый 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`
}
Escape SVG
Мы выкарыстоўваем escape-svg
функцыю для экраніравання <
сімвалаў >
і #
для фонавых малюнкаў SVG. Пры выкарыстанні escape-svg
функцыі URI даных павінны быць заключаны ў двукоссе.
Функцыі складання і аднімання
Мы выкарыстоўваем функцыі add
і subtract
для абгортвання calc
функцыі CSS. Асноўная мэта гэтых функцый - пазбегнуць памылак, калі ў выраз перадаецца 0
значэнне без адзінкі calc
. Выразы накшталт calc(10px - 0)
будуць вяртаць памылку ва ўсіх браўзерах, нягледзячы на тое, што яны матэматычна правільныя.
Прыклад, калі calc сапраўдны:
$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
}
}