Siirry pääsisältöön Siirry dokumenttien navigointiin
Check
in English

Sass

Käytä Sass-lähdetiedostojamme, jotta voit hyödyntää muuttujia, karttoja, sekoituksia 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

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 luoda manuaalisesti jotain samanlaista 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 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";

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

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

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ä $theme-colorsvaatimuksiemme väliin heti sen määritelmän jälkeen variablesja ennen sen käyttöä 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

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

Web Content Accessibility Guidelines (WCAG) -kontrastivaatimusten täyttämiseksi tekijöiden on tarjottava tekstin värikontrasti vähintään 4,5:1 ja ei-tekstin värikontrasti vähintään 3:1 , harvoja poikkeuksia lukuun ottamatta.

Tämän helpottamiseksi sisällytimme color-contrasttoiminnon Bootstrapiin. Se käyttää WCAG-kontrastisuhdealgoritmia kontrastikynnysten laskemiseen väriavaruuden suhteelliseen luminanssiin perustuen , jotta se palauttaa automaattisesti vaalean ( ), tumman ( ) tai mustan ( ) kontrastivärin määritetyn perusvärin perusteella. Tämä toiminto on erityisen hyödyllinen mikseissä tai silmukoissa, joissa luot useita luokkia.sRGB#fff#212529#000

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

We use the escape-svg function to escape the <, > and # characters for SVG background images. When using the escape-svg function, data URIs must be quoted.

Add and Subtract functions

We use the add and subtract functions to wrap the CSS calc function. The primary purpose of these functions is to avoid errors when a “unitless” 0 value is passed into a calc expression. Expressions like calc(10px - 0) will return an error in all browsers, despite being mathematically correct.

Example where the calc is valid:

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

Example where the calc is invalid:

$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

Our scss/mixins/ directory has a ton of mixins that power parts of Bootstrap and can also be used across your own project.

Color schemes

Mediakyselyn lyhennetty miksaus prefers-color-schemeon 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
  }
}