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, 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) , аўтары павінны забяспечыць мінімальны кантраст колеру тэксту 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`
}

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
  }
}