Сасс
Сезнең чыганакны тизрәк төзергә һәм проектны көйләргә ярдәм итәр өчен, Sass файлларын кулланыгыз.
Variзгәрешләрдән, карталардан, миксиннардан һәм башкалардан файдалану өчен безнең чыганак 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
Bootstrap чыганагы Sass файлларын импортлыйсыз. Сездә ике вариант бар: бөтен 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
. // Optional
Сез шулай ук кирәк булганда бүлек астына Bootstrap өлешләрен өсти башлый аласыз . Файлдан тулы импорт стакасын bootstrap.scss
сезнең башлангыч нокта итеп кулланырга тәкъдим итәбез.
Variзгәрешле дефолтлар
Bootstrap-ның һәр Sass үзгәрүчесе !default
флагны үз эченә ала, Bootstrap-ның чыганак кодын үзгәртмичә, үз Sass-та үзгәрүченең килешенгән кыйммәтен кире кагарга мөмкинлек бирә. Кирәк булганда үзгәрүчәннәрне күчереп языгыз, аларның кыйммәтләрен үзгәртегез һәм !default
флагны алыгыз. Әгәр дә үзгәрүчән билгеләнгән булса, ул Bootstrap'тагы килешү кыйммәтләре белән яңадан билгеләнмәячәк.
Сез Bootstrap үзгәрүчәннәренең тулы исемлеген таба аласыз scss/_variables.scss
. Кайбер үзгәрүчәннәр куелган null
, бу үзгәрүчәннәр сезнең конфигурациягездә артык язылмасалар, мөлкәтне чыгармыйлар.
Funksзгәрешле өстәмәләр безнең функцияләр кертелгәннән соң булырга тиеш, ә калган импорт алдыннан.
Менә npm аша Bootstrap- ны импортлаганда background-color
һәм төзегәндә үзгәртә торган мисал:color
<body>
// 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;
Соңрак, бу үзгәрешләр Bootstrap $theme-colors
картасында куелган:
$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
һәм danger
ачкычларны $theme-colors
сылтамалар, төймәләр, форма өчен кулланабыз. Бу ачкычларның кыйммәтләрен алыштыру бернинди проблема тудырырга тиеш түгел, ләкин аларны бетерү Sass компиляциясенә китерергә мөмкин. Бу очракларда сезгә бу кыйммәтләрне кулланган Sass кодын үзгәртергә кирәк.
Функцияләр
Төсләр
Бездә булган Sass карталары янында тема төсләре дә үзенчәлекле үзгәрүләр буларак кулланылырга мөмкин $primary
.
.custom-element {
color: $gray-100;
background-color: $dark;
}
Сез Bootstrap tint-color()
һәм shade-color()
функцияләре белән төсләрне җиңеләйтә яки караңгыландыра аласыз. Бу функцияләр төсләрне кара яки ак белән кушачак, Сассның туган 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 мәгълүматлары китерелергә тиеш.
Функцияләрне өстәү һәм алу
CSS функциясен төрү өчен без add
һәм функцияләрне кулланабыз . Бу функцияләрнең төп максаты - "берәмлексез" кыйммәт экспрессиягә күчкәндә хаталардан саклану. Мондый сүзләр математик яктан дөрес булуына карамастан, барлык браузерларда хата җибәрәчәк.subtract
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
}
}