in English

Sass

Käytä Sass-lähdetiedostojamme, jotta voit hyödyntää muuttujia, karttoja, mixinejä ja toimintoja, jotka auttavat sinua rakentamaan nopeammin ja mukauttamaan projektiasi.

Tällä sivulla

Hyödynnä Sass-lähdetiedostojamme muuttujien, karttojen, mixinien ja muiden ominaisuuksien hyödyntämiseksi.

Tiedoston rakenne

Aina kun mahdollista, vältä Bootstrapin ydintiedostojen muokkaamista. 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.scssBootstrapin Sass-lähdetiedostot -kansioon. 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-laajennuksillemme.

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

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 // Optionalosion alle tarpeen mukaan. Suosittelemme käyttämään bootstrap.scsstiedostomme koko tuontipinoa lähtökohtana.

Muuttuva oletusarvo

Jokainen Bootstrapin Sass-muuttuja sisältää !defaultlipun, jonka avulla voit ohittaa muuttujan oletusarvon omassa Sassissasi muuttamatta Bootstrapin lähdekoodia. Kopioi ja liitä muuttujia tarpeen mukaan, muokkaa niiden arvoja ja poista !defaultlippu. 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. Jotkin muuttujat on asetettu arvoon null, nämä muuttujat eivät tuota ominaisuutta, ellei niitä ole ohitettu määrityksessäsi.

Muuttujien ohitusten on tapahduttava toimintojemme tuonnin jälkeen, mutta ennen muuta tuontia.

Tässä on esimerkki, joka muuttaa background-colorja colorfor 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";

// Optional Bootstrap components here
@import "../node_modules/bootstrap/scss/root";
@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.

Aloita Bootstrapin käyttö npm:n kautta aloitusprojektimme avulla! Siirry twbs/bootstrap-npm-starter-mallivarastoon nähdäksesi, kuinka voit rakentaa ja mukauttaa Bootstrapia omassa npm-projektissasi. Sisältää Sass-kääntäjän, Autoprefixerin, Stylelintin, PurgeCSS- ja Bootstrap-kuvakkeet.

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 !defaultlipun, 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-colorskartan 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-colorskartalle:

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

Lisää karttaan

Lisää uusia värejä $theme-colorskarttaan 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-colorskartan 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-colorskartalta 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";

$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

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, successja danger-näppäimiä $theme-colorslinkkien, 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 , sRGBjotta se palauttaa automaattisesti vaalean ( #fff), tumman ( #212529) tai mustan ( #000) kontrastivärin määritetyn perusvärin perusteella. Tämä toiminto on erityisen hyödyllinen mixineissä tai silmukoissa, joissa luot useita luokkia.

Voit esimerkiksi luoda värimalleja $theme-colorskartastamme 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-svgvälttämiseen SVG-taustakuvissa. Funktiota käytettäessä datan URI:t on lainattava.<>#escape-svg

Lisää- ja vähennystoiminnot

Käytämme addja subtract-funktioita CSS-funktion käärimiseen calc. Näiden funktioiden ensisijainen tarkoitus on välttää virheet, kun lausekkeeseen 0vä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-schemeon saatavilla light, dark, ja mukautettujen värimallien tuella.

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