Ugrás a fő tartalomhoz Ugrás a dokumentumok navigációjához

Használja forrás Sass fájljainkat, hogy kihasználja a változók, térképek, mixinek és függvények előnyeit a gyorsabb építkezés és a projekt testreszabása érdekében.

Használja forrás Sass fájljainkat a változók, térképek, mixinek és egyebek kihasználásához.

Fájlszerkezet

Amikor csak lehetséges, kerülje a Bootstrap alapvető fájljainak módosítását. A Sass esetében ez azt jelenti, hogy saját stíluslapot kell létrehozni, amely importálja a Bootstrap-et, így módosíthatja és kiterjesztheti azt. Feltételezve, hogy csomagkezelőt, például npm-et használ, a következőképpen néz ki a fájlszerkezet:

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

Ha letöltötte a forrásfájljainkat, és nem használ csomagkezelőt, akkor manuálisan kell beállítania valami hasonlót ehhez a struktúrához, elkülönítve a Bootstrap forrásfájljait a sajátjától.

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

Importálás

A custom.scssfájlba importálja a Bootstrap forrás Sass fájljait. Két lehetőség közül választhat: tartalmazza az összes Bootstrapet, vagy válassza ki a szükséges részeket. Ez utóbbit javasoljuk, bár ne feledje, hogy összetevőink között vannak bizonyos követelmények és függőségek. Beépülő moduljainkhoz néhány JavaScript-kódot is tartalmaznia kell.

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

Ha ezt a beállítást elvégezte, megkezdheti a Sass-változók és térképek bármelyikének módosítását a custom.scss. Szükség esetén elkezdheti hozzáadni a Bootstrap részeit a // Optionalszakaszhoz. Javasoljuk, hogy bootstrap.scsskiindulási pontként használja a fájlunkból származó teljes importálási veremet.

Változó alapértelmezések

A Bootstrap minden Sass-változója tartalmazza a !defaultjelzőt, amely lehetővé teszi a változó alapértelmezett értékének felülírását a saját Sass-ban a Bootstrap forráskódjának módosítása nélkül. Szükség szerint másolja és illessze be a változókat, módosítsa értékeiket, és távolítsa el a !defaultjelzőt. Ha egy változó már hozzá van rendelve, akkor a rendszer nem fogja újra hozzárendelni a Bootstrap alapértelmezett értékeit.

A Bootstrap változóinak teljes listáját itt találja scss/_variables.scss. Egyes változók értéke null, ezek a változók nem adják ki a tulajdonságot, hacsak nincsenek felülírva a konfigurációban.

A változók felülbírálásának a függvényeink importálása után kell megtörténnie, de a többi importálás előtt.

Íme egy példa, amely megváltoztatja a background-colorés colora <body>Bootstrap npm-en keresztüli importálásakor és fordításakor:

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

Szükség szerint ismételje meg a műveletet a Bootstrap bármely változójával, beleértve az alábbi globális beállításokat is.

Kezdő projektünkkel kezdje el a Bootstrap használatát az npm-en keresztül! Nyissa meg a twbs/bootstrap-npm-starter sablontárat, és nézze meg, hogyan hozhatja létre és testreszabhatja a Bootstrap-ot saját npm-projektjében. Tartalmazza a Sass fordítót, az Autoprefixert, a Stylelint, a PurgeCSS és a Bootstrap ikonokat.

Térképek és hurkok

A Bootstrap egy maroknyi Sass térképet tartalmaz, kulcsértékpárokat, amelyek megkönnyítik a kapcsolódó CSS-családok létrehozását. Sass térképeket használunk színeinkhez, rácstöréspontjainkhoz és sok máshoz. Csakúgy, mint a Sass változók, minden Sass térkép tartalmazza a !defaultzászlót, és felülbírálható és kiterjeszthető.

Egyes Sass térképeink alapértelmezés szerint üresekké vannak egyesítve. Ennek célja egy adott Sass térkép egyszerű bővítése, de ennek az az ára, hogy kissé megnehezíti az elemek eltávolítását a térképről.

Térkép módosítása

A térképen szereplő összes változó $theme-colorsönálló változóként van definiálva. Ha módosítani szeretne egy meglévő színt a $theme-colorstérképünkön, adja hozzá a következőket az egyéni Sass fájlhoz:

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

Később ezek a változók a Bootstrap $theme-colorstérképén lesznek beállítva:

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

Hozzáadás a térképhez

Adjon hozzá új színeket a $theme-colorstérképhez vagy bármely más térképhez úgy, hogy új Sass-térképet hoz létre egyéni értékeivel, és egyesíti az eredeti térképpel. Ebben az esetben létrehozunk egy új $custom-colorstérképet, és egyesítjük a következővel $theme-colors.

// Create your own map
$custom-colors: (
  "custom-color": #900
);

// Merge the maps
$theme-colors: map-merge($theme-colors, $custom-colors);

Eltávolítás a térképről

A színek eltávolításához a $theme-colorsvagy bármely más térképről használja a gombot map-remove. Ne feledje, hogy a követelményeink és a lehetőségeink közé kell beillesztenie:

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

Szükséges kulcsok

A Bootstrap feltételezi bizonyos kulcsok jelenlétét a Sass térképeken belül, ahogy ezeket mi magunk használtuk és kiterjesztettük. A mellékelt térképek testreszabása során hibákat tapasztalhat, ha egy adott Sass térkép kulcsát használják.

Például a primary, successés dangera gombokat $theme-colorshasználjuk hivatkozásokhoz, gombokhoz és űrlapállapotokhoz. A kulcsok értékeinek cseréje nem okozhat problémát, de eltávolításuk Sass fordítási problémákat okozhat. Ezekben az esetekben módosítania kell az ezeket az értékeket használó Sass-kódot.

Funkciók

Színek

A rendelkezésünkre álló Sass térképek mellett a témaszínek önálló változóként is használhatók, mint pl $primary.

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

tint-color()A Bootstrap és a shade-color()funkciók segítségével világosíthatja vagy sötétítheti a színeket . Ezek a funkciók keverik a színeket a feketével vagy a fehérrel, ellentétben a Sass natív funkcióival, lighten()valamint azokkal a darken()funkciókkal, amelyek fix mértékben megváltoztatják a világosságot, ami gyakran nem vezet a kívánt hatáshoz.

// 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));
}

A gyakorlatban meghívja a függvényt, és megadja a szín- és súlyparamétereket.

.custom-element {
  color: tint-color($primary, 10%);
}

.custom-element-2 {
  color: shade-color($danger, 30%);
}

Színkontraszt

A színkontrasztra vonatkozó WCAG 2.0 akadálymentesítési szabványok teljesítése érdekében a szerzőknek – nagyon kevés kivételtől eltekintve – legalább 4,5:1 kontrasztarányt kell biztosítaniuk .

Egy további funkció, amelyet a Bootstrap-ban tartalmaz, a színkontraszt funkció, color-contrast. A WCAG 2.0 algoritmust használja a kontrasztküszöbök kiszámításához a színtér relatív fénysűrűségesRGB alapján, hogy automatikusan világos ( #fff), sötét ( #212529) vagy fekete ( #000) kontrasztszínt adjon vissza a megadott alapszín alapján. Ez a funkció különösen hasznos mixineknél vagy ciklusoknál, ahol több osztályt generál.

Például színminták létrehozásához a $theme-colorstérképünkről:

@each $color, $value in $theme-colors {
  .swatch-#{$color} {
    color: color-contrast($value);
  }
}

Egyszeri kontraszt igényekhez is használható:

.custom-element {
  color: color-contrast(#000); // returns `color: #fff`
}

Színtérkép funkcióinkkal alapszínt is megadhat:

.custom-element {
  color: color-contrast($dark); // returns `color: #fff`
}

Escape SVG

A escape-svgfüggvényt használjuk a <, >és #karakterek kihagyására SVG háttérképeknél. A escape-svgfüggvény használatakor az adat URI-kat idézni kell.

Összeadás és kivonás függvények

A addés subtractfüggvényeket használjuk a CSS calcfüggvény burkolására. Ezeknek a függvényeknek az elsődleges célja a hibák elkerülése, amikor „egység nélküli” 0értéket adnak át egy calckifejezésbe. A hasonló kifejezések calc(10px - 0)minden böngészőben hibát adnak vissza, annak ellenére, hogy matematikailag helyesek.

Példa, ahol a számítás érvényes:

$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);
}

Példa, ahol a számítás érvénytelen:

$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);
}

Mixins

Könyvtárunkban rengeteg mixin scss/mixins/található, amelyek a Bootstrap egyes részeit táplálják, és saját projektjei során is felhasználhatók.

Színsémák

A médialekérdezéshez prefers-color-schemeelérhető egy rövidített mix a light, darkés az egyéni színsémák támogatásával.

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