Sass
Käytä Sass-lähdetiedostojamme, jotta voit hyödyntää muuttujia, karttoja, sekoituksia ja toimintoja, jotka auttavat sinua rakentamaan nopeammin ja mukauttamaan projektiasi.
Hyödynnä Sass-lähdetiedostojamme muuttujien, karttojen, mixinien ja muiden ominaisuuksien hyödyntämiseksi.
Tiedoston rakenne
Vältä Bootstrapin ydintiedostojen muokkaamista aina kun mahdollista. Sassille tämä tarkoittaa oman tyylisivun luomista, joka tuo Bootstrapin, jotta voit muokata ja laajentaa sitä. Olettaen, että käytät paketinhallintaohjelmaa, kuten npm, tiedostorakenne näyttää tältä:
your-project/
├── scss
│ └── custom.scss
└── node_modules/
└── bootstrap
├── js
└── scss
Jos olet ladannut lähdetiedostomme etkä käytä paketinhallintaa, sinun kannattaa määrittää manuaalisesti jotain samankaltaista rakennetta ja pitää Bootstrapin lähdetiedostot erillään omista tiedostoistasi.
your-project/
├── scss
│ └── custom.scss
└── bootstrap/
├── js
└── scss
Tuodaan
Tuot custom.scss
Bootstrapin Sass-lähdetiedostot tiedostoosi. Sinulla on kaksi vaihtoehtoa: sisällytä kaikki Bootstrap tai valitse tarvitsemasi osat. Suosittelemme jälkimmäistä, mutta muista, että komponenttiemme välillä on joitain vaatimuksia ja riippuvuuksia. Sinun on myös sisällytettävä JavaScript-laajennuksiamme varten.
// 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
Kun tämä asetus on tehty, voit alkaa muokata mitä tahansa Sass-muuttujia ja -karttoja custom.scss
. Voit myös aloittaa Bootstrapin osien lisäämisen // Optional
osion alle tarpeen mukaan. Suosittelemme käyttämään bootstrap.scss
tiedostomme koko tuontipinoa lähtökohtana.
Muuttuva oletusarvo
Jokainen Bootstrapin Sass-muuttuja sisältää !default
lipun, jonka avulla voit ohittaa muuttujan oletusarvon omassa Sassissasi muuttamatta Bootstrapin lähdekoodia. Kopioi ja liitä muuttujia tarpeen mukaan, muokkaa niiden arvoja ja poista !default
lippu. Jos muuttuja on jo määritetty, sitä ei määritetä uudelleen Bootstrapin oletusarvoilla.
Löydät täydellisen luettelon Bootstrapin muuttujista kohdasta scss/_variables.scss
. Jotkut muuttujat on asetettu arvoon null
, nämä muuttujat eivät tuota ominaisuutta, ellei niitä ole ohitettu määrityksessäsi.
Muuttujien ohitusten tulee tapahtua toimintojemme tuonnin jälkeen, mutta ennen muuta tuontia.
Tässä on esimerkki, joka muuttaa background-color
ja color
for the, <body>
kun Bootstrap tuodaan ja käännetään npm:n kautta:
// 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
Toista tarvittaessa mille tahansa Bootstrapin muuttujalle, mukaan lukien alla olevat yleiset asetukset.
Kartat ja silmukat
Bootstrap sisältää kourallisen Sass-karttoja, avainarvopareja, jotka helpottavat toisiinsa liittyvien CSS-perheiden luomista. Käytämme Sass-karttoja väreissämme, ruudukon keskeytyspisteissä ja monessa muussa. Aivan kuten Sass-muuttujat, kaikki Sass-kartat sisältävät !default
lipun, ja ne voidaan ohittaa ja laajentaa.
Jotkut Sass-kartoistamme on oletuksena yhdistetty tyhjiksi. Tämä tehdään tietyn Sass-kartan helpon laajentamisen mahdollistamiseksi, mutta sen kustannuksella on kohteiden poistaminen kartalta hieman vaikeampaa.
Muokkaa karttaa
Kaikki $theme-colors
kartan muuttujat määritellään itsenäisiksi muuttujiksi. Jos haluat muokata kartallamme olevaa väriä $theme-colors
, lisää seuraavat mukautettuun Sass-tiedostoosi:
$primary: #0074d9;
$danger: #ff4136;
Myöhemmin nämä muuttujat asetetaan Bootstrapin $theme-colors
kartalle:
$theme-colors: (
"primary": $primary,
"danger": $danger
);
Lisää karttaan
Lisää uusia värejä $theme-colors
karttaan tai mihin tahansa muuhun karttaan luomalla uusi Sass-kartta mukautetuilla arvoillasi ja yhdistämällä se alkuperäiseen karttaan. Tässä tapauksessa luomme uuden $custom-colors
kartan ja yhdistämme sen kanssa $theme-colors
.
// Create your own map
$custom-colors: (
"custom-color": #900
);
// Merge the maps
$theme-colors: map-merge($theme-colors, $custom-colors);
Poista kartalta
Voit poistaa värit $theme-colors
kartalta tai mistä tahansa muusta kartasta käyttämällä map-remove
. Huomaa, että sinun on lisättävä se vaatimustemme ja vaihtoehtojemme väliin:
// 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
Tarvittavat avaimet
Bootstrap olettaa joidenkin tiettyjen avainten läsnäolon Sass-kartoissa, kun käytimme ja laajennamme niitä itse. Kun mukautat mukana olevia karttoja, saatat kohdata virheitä, kun käytetään tiettyä Sass-kartan avainta.
Käytämme esimerkiksi primary
, success
ja danger
-näppäimiä $theme-colors
linkkien, painikkeiden ja lomakkeiden tiloihin. Näiden avainten arvojen korvaamisen ei pitäisi aiheuttaa ongelmia, mutta niiden poistaminen voi aiheuttaa Sass-kääntämisongelmia. Näissä tapauksissa sinun on muutettava Sass-koodia, joka käyttää näitä arvoja.
Toiminnot
värit
Meillä olevien Sass-karttojen lisäksi teemavärejä voidaan käyttää myös itsenäisinä muuttujina, kuten $primary
.
.custom-element {
color: $gray-100;
background-color: $dark;
}
Voit vaalentaa tai tummentaa värejä Bootstrapilla tint-color()
ja shade-color()
toiminnoilla. Nämä toiminnot sekoittavat värejä mustaan tai valkoiseen, toisin kuin Sassin natiivi lighten()
ja darken()
toiminnot, jotka muuttavat vaaleutta tietyn verran, mikä ei usein johda haluttuun tehoon.
// 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));
}
Käytännössä kutsuisit funktiota ja välität väri- ja painoparametrit.
.custom-element {
color: tint-color($primary, 10%);
}
.custom-element-2 {
color: shade-color($danger, 30%);
}
Värikontrasti
Täyttääkseen WCAG 2.0:n saavutettavuusstandardit värikontrastin osalta tekijöiden on tarjottava kontrastisuhde vähintään 4,5:1 harvoja poikkeuksia lukuun ottamatta.
Lisätoiminto, jonka sisällytämme Bootstrapiin, on värikontrastitoiminto, color-contrast
. Se käyttää WCAG 2.0 -algoritmia kontrastikynnysten laskemiseen väritilan suhteelliseen luminanssiin perustuen , sRGB
jotta se palauttaa automaattisesti vaalean ( #fff
), tumman ( #212529
) tai mustan ( #000
) kontrastivärin määritetyn perusvärin perusteella. Tämä toiminto on erityisen hyödyllinen mikseissä tai silmukoissa, joissa luot useita luokkia.
Voit esimerkiksi luoda värimalleja $theme-colors
kartastamme seuraavasti:
@each $color, $value in $theme-colors {
.swatch-#{$color} {
color: color-contrast($value);
}
}
Sitä voidaan käyttää myös kertaluonteisiin kontrastitarpeisiin:
.custom-element {
color: color-contrast(#000); // returns `color: #fff`
}
Voit myös määrittää perusvärin värikarttatoiminnoillamme:
.custom-element {
color: color-contrast($dark); // returns `color: #fff`
}
Escape SVG
Käytämme funktiota , ja -merkkien escape-svg
välttämiseen SVG-taustakuvissa. Funktiota käytettäessä datan URI:t on lainattava.<
>
#
escape-svg
Lisää- ja vähennystoiminnot
Käytämme add
ja subtract
-funktioita CSS-funktion käärimiseen calc
. Näiden funktioiden ensisijainen tarkoitus on välttää virheet, kun lausekkeeseen 0
välitetään "yksikkötön" arvo calc
. Lausekkeet kuten calc(10px - 0)
palauttavat virheilmoituksen kaikissa selaimissa, vaikka ne ovat matemaattisesti oikein.
Esimerkki, jossa laskenta on voimassa:
$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);
}
Esimerkki, jossa laskenta on virheellinen:
$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);
}
Seokset
Hakemistossamme on paljon mixinejä scss/mixins/
, jotka tukevat Bootstrapin osia ja joita voidaan käyttää myös omassa projektissasi.
Värimallit
Mediakyselyn lyhennetty miksaus prefers-color-scheme
on saatavilla, ja se tukee light
, dark
, ja mukautettuja värimalleja.
@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
}
}