Сас

Искористете ги нашите изворни датотеки 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и 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) , авторите мора да обезбедат минимален контраст на бојата на текстот од 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`
}

Избега 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
  }
}