Сасс

Користите наше изворне Сасс датотеке да бисте искористили предности променљивих, мапа, миксина и функција које ће вам помоћи да направите брже и прилагодите свој пројекат.

На овој страници

Користите наше изворне Сасс датотеке да бисте искористили предности променљивих, мапа, миксина и још много тога.

Структура датотеке

Кад год је то могуће, избегавајте да мењате основне датотеке Боотстрапа. За Сасс, то значи да направите сопствену листу стилова која увози Боотстрап тако да можете да га мењате и проширите. Под претпоставком да користите менаџер пакета као што је нпм, имаћете структуру датотеке која изгледа овако:

your-project/
├── scss
│   └── custom.scss
└── node_modules/
    └── bootstrap
        ├── js
        └── scss

Ако сте преузели наше изворне датотеке и не користите менаџер пакета, пожелећете да ручно креирате нешто слично тој структури, држећи изворне датотеке Боотстрапа одвојене од ваших.

your-project/
├── scss
│   └── custom.scss
└── bootstrap/
    ├── js
    └── scss

Увоз

У свој custom.scss, увезћете изворне Сасс датотеке Боотстрапа. Имате две опције: укључите цео Боотстрап или изаберите делове који су вам потребни. Подстичемо ово друго, иако имајте на уму да постоје неки захтеви и зависности међу нашим компонентама. Такође ћете морати да укључите неки ЈаваСцрипт за наше додатке.

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

Са тим подешавањем, можете почети да мењате било коју од Сасс променљивих и мапа у вашем custom.scss. Такође можете почети да додајете делове Боотстрапа испод // Optionalодељка по потреби. Предлажемо да користите комплетан стек увоза из наше bootstrap.scssдатотеке као полазну тачку.

Променљиве подразумеване вредности

Свака Сасс променљива у Боотстрап-у укључује !defaultознаку која вам омогућава да замените подразумевану вредност променљиве у свом сопственом Сасс-у без модификације изворног кода Боотстрапа. Копирајте и налепите променљиве по потреби, измените њихове вредности и уклоните !defaultознаку. Ако је променљива већ додељена, она неће бити поново додељена подразумеваним вредностима у Боотстрапу.

Наћи ћете комплетну листу Боотстрап-ових варијабли у scss/_variables.scss. Неке променљиве су подешене на null, ове променљиве не дају својство осим ако нису замењене у вашој конфигурацији.

Замена променљивих мора доћи након увоза наших функција, али пре остатка увоза.

Ево примера који мења 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/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

Поновите по потреби за било коју променљиву у Боотстрапу, укључујући глобалне опције испод.

Започните са Боотстрапом преко нпм-а са нашим почетним пројектом! Идите на твбс/боотстрап-нпм-стартер спремиште шаблона да видите како да направите и прилагодите Боотстрап у свом сопственом нпм пројекту. Укључује Сасс компајлер, Аутопрефикер, Стилелинт, ПургеЦСС и Боотстрап иконе.

Мапе и петље

Боотстрап укључује прегршт Сасс мапа, парова кључних вредности који олакшавају генерисање породица повезаних ЦСС-а. Користимо Сасс мапе за наше боје, тачке прекида мреже и још много тога. Баш као и Сасс променљиве, све Сасс мапе укључују !defaultзаставу и могу се заменити и проширити.

Неке од наших Сасс мапа су подразумевано спојене у празне. Ово се ради како би се омогућило лако проширење дате Сасс мапе, али долази по цену да се уклањање ставки са мапе учини мало тежим.

Измените мапу

Све варијабле у $theme-colorsмапи су дефинисане као самосталне варијабле. Да бисте изменили постојећу боју на нашој $theme-colorsмапи, додајте следеће у своју прилагођену Сасс датотеку:

$primary: #0074d9;
$danger: #ff4136;

Касније се ове варијабле постављају у Боотстрап-ову $theme-colorsмапу:

$theme-colors: (
  "primary": $primary,
  "danger": $danger
);

Додај на мапу

Додајте нове боје на $theme-colorsили било коју другу мапу тако што ћете креирати нову Сасс мапу са вашим прилагођеним вредностима и спојити је са оригиналном мапом. У овом случају, направићемо нову $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

Обавезни кључеви

Боотстрап претпоставља присуство неких специфичних кључева унутар Сасс мапа како смо их сами користили и проширивали. Док прилагођавате укључене мапе, можете наићи на грешке када се користи одређени кључ Сасс мапе.

На пример, користимо тастере primary, success, и dangerод $theme-colorsза везе, дугмад и стања обрасца. Замена вредности ових кључева не би требало да представља проблеме, али њихово уклањање може изазвати проблеме са компилацијом Сасс-а. У овим случајевима, мораћете да измените Сасс код који користи те вредности.

Функције

Боје

Поред Сасс мапа које имамо, боје теме се такође могу користити као самосталне променљиве, као што је $primary.

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

Можете осветлити или потамнити боје помоћу Боотстрапа 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%);
}

Контраст боја

Да би испунили захтеве за контраст у смерницама за приступачност веб садржаја (ВЦАГ) , аутори морају да обезбеде минимални контраст боја текста од 4,5:1 и минимални контраст боја без текста од 3:1 , уз врло мало изузетака.

Да бисмо помогли у томе, укључили смо color-contrastфункцију у Боотстрап. Користи ВЦАГ алгоритам за однос контраста за израчунавање прагова контраста на основу релативне осветљености у 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функцију, УРИ података мора бити наведен.

Функције сабирања и одузимања

Користимо функције 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/директоријум има гомилу миксева који напајају делове Боотстрапа и такође се могу користити у вашем пројекту.

Шеме боја

Доступан је скраћени микс за 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
  }
}