Sass
Pasinaudokite mūsų šaltinio Sass failais, kad galėtumėte pasinaudoti kintamaisiais, žemėlapiais, deriniais ir funkcijomis, kad galėtumėte greičiau kurti ir pritaikyti projektą.
Pasinaudokite mūsų šaltinio Sass failais, kad galėtumėte pasinaudoti kintamaisiais, žemėlapiais, mišiniais ir kt.
Failo struktūra
Kai tik įmanoma, nekeiskite pagrindinių „Bootstrap“ failų. „Sass“ tai reiškia, kad reikia sukurti savo stiliaus lapą, kuris importuoja „Bootstrap“, kad galėtumėte jį modifikuoti ir išplėsti. Darant prielaidą, kad naudojate paketų tvarkyklę, pvz., npm, failo struktūra atrodys taip:
your-project/
├── scss
│ └── custom.scss
└── node_modules/
└── bootstrap
├── js
└── scss
Jei atsisiuntėte šaltinio failus ir nenaudojate paketų tvarkyklės, norėsite rankiniu būdu nustatyti kažką panašaus į tą struktūrą, atskirdami Bootstrap šaltinio failus nuo savo.
your-project/
├── scss
│ └── custom.scss
└── bootstrap/
├── js
└── scss
Importuojama
Į savo custom.scss
, importuosite Bootstrap šaltinio Sass failus. Turite dvi parinktis: įtraukti visą „Bootstrap“ arba pasirinkti reikalingas dalis. Mes skatiname pastarąjį, nors atminkite, kad mūsų komponentams yra tam tikrų reikalavimų ir priklausomybių. Taip pat turėsite įtraukti šiek tiek „JavaScript“ į mūsų papildinius.
// 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
Sukūrę šią sąranką, galite pradėti keisti bet kuriuos Sass kintamuosius ir žemėlapius savo custom.scss
. Taip pat galite pradėti pridėti „Bootstrap“ dalis po // Optional
skyriumi, jei reikia. bootstrap.scss
Kaip išeities tašką siūlome naudoti visą importavimo krūvą iš mūsų failo.
Kintamieji numatytieji nustatymai
Kiekvienas Bootstrap Sass kintamasis turi !default
vėliavėlę, leidžiančią nepaisyti numatytosios kintamojo reikšmės savo Sass nekeičiant Bootstrap šaltinio kodo. Jei reikia, nukopijuokite ir įklijuokite kintamuosius, pakeiskite jų reikšmes ir pašalinkite !default
vėliavėlę. Jei kintamasis jau buvo priskirtas, jis nebus iš naujo priskirtas pagal numatytąsias „Bootstrap“ reikšmes.
Visą „Bootstrap“ kintamųjų sąrašą rasite scss/_variables.scss
. Kai kurie kintamieji nustatyti į null
, šie kintamieji nepateikia nuosavybės, nebent jūsų konfigūracijoje jų nepaisoma.
Kintamųjų nepaisymas turi būti atliktas importavus mūsų funkcijas, bet prieš importuojant likusias dalis.
Štai pavyzdys, kuris pakeičia background-color
ir color
, <body>
kai importuojamas ir kompiliuojamas Bootstrap per npm:
// 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
Pakartokite, jei reikia, naudodami bet kurį „Bootstrap“ kintamąjį, įskaitant toliau pateiktas visuotines parinktis.
Žemėlapiai ir kilpos
„Bootstrap“ apima keletą „Sass“ žemėlapių, pagrindinių reikšmių porų, kurios palengvina susijusių CSS šeimų generavimą. Savo spalvoms, tinklelio lūžio taškams ir kt. naudojame Sass žemėlapius. Kaip ir Sass kintamieji, visuose Sass žemėlapiuose yra !default
vėliavėlė ir juos galima nepaisyti bei išplėsti.
Kai kurie mūsų Sass žemėlapiai pagal numatytuosius nustatymus yra sujungti į tuščius. Tai daroma, kad būtų galima lengvai išplėsti tam tikrą Sass žemėlapį, tačiau dėl to elementų pašalinimas iš žemėlapio yra šiek tiek sudėtingesnis.
Keisti žemėlapį
Visi kintamieji $theme-colors
žemėlapyje apibrėžiami kaip atskiri kintamieji. Norėdami modifikuoti esamą spalvą mūsų $theme-colors
žemėlapyje, į savo pasirinktinį Sass failą pridėkite:
$primary: #0074d9;
$danger: #ff4136;
Vėliau šie kintamieji nustatomi „Bootstrap“ $theme-colors
žemėlapyje:
$theme-colors: (
"primary": $primary,
"danger": $danger
);
Pridėti į žemėlapį
Pridėkite naujų spalvų į $theme-colors
arba bet kurį kitą žemėlapį, sukurdami naują Sass žemėlapį su tinkintomis reikšmėmis ir sujungę jį su pradiniu žemėlapiu. Tokiu atveju sukursime naują $custom-colors
žemėlapį ir sujungsime jį su $theme-colors
.
// Create your own map
$custom-colors: (
"custom-color": #900
);
// Merge the maps
$theme-colors: map-merge($theme-colors, $custom-colors);
Pašalinti iš žemėlapio
Norėdami pašalinti spalvas iš $theme-colors
ar bet kurio kito žemėlapio, naudokite map-remove
. Atminkite, kad jį turite įrašyti tarp mūsų reikalavimų ir parinkčių:
// 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
Reikalingi raktai
„Bootstrap“ daro prielaidą, kad „Sass“ žemėlapiuose yra tam tikrų specifinių raktų, kuriuos naudojome ir išplėtėme patys. Kai tinkinate įtrauktus žemėlapius, galite susidurti su klaidomis, kai naudojamas konkretus Sass žemėlapio raktas.
Pavyzdžiui, nuorodoms, mygtukams ir formos būsenoms naudojame klavišus , primary
ir success
. Pakeitus šių raktų reikšmes neturėtų kilti problemų, tačiau jas pašalinus gali kilti Sass kompiliavimo problemų. Tokiais atvejais turėsite modifikuoti Sass kodą, kuris naudoja šias reikšmes.danger
$theme-colors
Funkcijos
Spalvos
Be mūsų turimų Sass žemėlapių , temos spalvos taip pat gali būti naudojamos kaip atskiri kintamieji, pvz ., $primary
.
.custom-element {
color: $gray-100;
background-color: $dark;
}
Galite pašviesinti arba patamsinti spalvas naudodami „Bootstrap“ tint-color()
ir shade-color()
funkcijas. Šios funkcijos maišys spalvas su juoda arba balta, skirtingai nei Sass, lighten()
ir darken()
funkcijos, kurios pakeis šviesumą fiksuotu kiekiu, o tai dažnai nesukelia norimo efekto.
// 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));
}
Praktiškai iškviečiate funkciją ir perduodate spalvos bei svorio parametrus.
.custom-element {
color: tint-color($primary, 10%);
}
.custom-element-2 {
color: shade-color($danger, 30%);
}
Spalvų kontrastas
Kad atitiktų WCAG 2.0 pritaikymo neįgaliesiems standartus dėl spalvų kontrasto , autoriai turi pateikti bent 4,5:1 kontrasto santykį su labai keliomis išimtimis.
Papildoma funkcija, kurią įtraukiame į „Bootstrap“, yra spalvų kontrasto funkcija color-contrast
. Jis naudoja WCAG 2.0 algoritmą kontrasto slenksčiams apskaičiuoti pagal santykinį skaistį spalvų erdvėje , sRGB
kad automatiškai grąžintų šviesią ( #fff
), tamsią ( #212529
) arba juodą ( #000
) kontrasto spalvą pagal nurodytą bazinę spalvą. Ši funkcija ypač naudinga mišiniams arba ciklams, kuriuose generuojate kelias klases.
Pavyzdžiui, norėdami sugeneruoti spalvų pavyzdžius iš mūsų $theme-colors
žemėlapio:
@each $color, $value in $theme-colors {
.swatch-#{$color} {
color: color-contrast($value);
}
}
Jis taip pat gali būti naudojamas vienkartiniams kontrasto poreikiams:
.custom-element {
color: color-contrast(#000); // returns `color: #fff`
}
Taip pat galite nurodyti pagrindinę spalvą naudodami mūsų spalvų žemėlapio funkcijas:
.custom-element {
color: color-contrast($dark); // returns `color: #fff`
}
Pabėgti nuo SVG
SVG fono vaizdams naudojame escape-svg
funkciją, kad išvengtume <
, >
ir simbolių. #
Naudojant escape-svg
funkciją, duomenų URI turi būti cituojami.
Pridėti ir atimti funkcijos
CSS funkcijai apvynioti naudojame ir add
funkcijas . Pagrindinis šių funkcijų tikslas yra išvengti klaidų, kai į išraišką perduodama „be vieneto“ reikšmė . Tokios išraiškos kaip pateiks klaidą visose naršyklėse, nepaisant to, kad yra matematiškai teisingos.subtract
calc
0
calc
calc(10px - 0)
Pavyzdys, kur skaičiavimas galioja:
$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);
}
Pavyzdys, kai skaičiavimas neteisingas:
$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);
}
Mišiniai
Mūsų scss/mixins/
kataloge yra daugybė mišinių, kurie maitina „Bootstrap“ dalis ir gali būti naudojami jūsų projekte.
Spalvų schemos
Galimas prefers-color-scheme
daugialypės terpės užklausos sutrumpintas mišinys, palaikantis light
, dark
ir pasirinktines spalvų schemas.
@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
}
}