Sass
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";
// 4. Include any optional Bootstrap components as you like
@import "../node_modules/bootstrap/scss/root";
@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";
// 5. 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. // OptionalSzükség esetén a Bootstrap részeit is hozzáadhatja a szakaszhoz. 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";
// Optional Bootstrap components here
@import "../node_modules/bootstrap/scss/root";
@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.
Térképek és hurkok
A Bootstrap tartalmaz egy maroknyi Sass térképet, kulcsértékpárokat, amelyek megkönnyítik a kapcsolódó CSS-családok létrehozását. A Sass térképeket használjuk színeinkhez, rácstöréspontjainkhoz és egyebekhez. 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";
$theme-colors: map-remove($theme-colors, "info", "light", "dark");
// Optional
@import "../node_modules/bootstrap/scss/root";
@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 mi magunk használtuk és bővítettük ezeket. 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 módosítjá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
}
}