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

Šiame puslapyje

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 sukurti 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";

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

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 // Optionalskyriumi, jei reikia. bootstrap.scssKaip išeities tašką siūlome naudoti visą importavimo krūvą iš mūsų failo.

Kintamieji numatytieji nustatymai

Kiekvienas Bootstrap Sass kintamasis turi !defaultvė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 !defaultvė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-colorir 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/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

Pakartokite, jei reikia, naudodami bet kurį „Bootstrap“ kintamąjį, įskaitant toliau pateiktas visuotines parinktis.

Pradėkite naudoti „Bootstrap“ naudodami „npm“ su mūsų pradedančiuoju projektu! Eikite į twbs/bootstrap-npm-starter šablonų saugyklą ir sužinokite, kaip sukurti ir tinkinti Bootstrap savo npm projekte. Apima Sass kompiliatorių, Autoprefixer, Stylelint, PurgeCSS ir Bootstrap piktogramas.

Ž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 !defaultvė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-colorsarba 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-colorsar bet kurio kito žemėlapio, naudokite map-remove. Atminkite, kad $theme-colorstarp mūsų reikalavimų turite įterpti iškart po jo apibrėžimo variablesir prieš naudojimą 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

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 , primaryir 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ų žiniatinklio turinio prieinamumo gaires (WCAG) kontrasto reikalavimus, autoriai turi pateikti minimalų teksto spalvų kontrastą 4,5:1 ir minimalų ne teksto spalvų kontrastą 3:1 , su labai keliomis išimtimis.

Norėdami tai padaryti, įtraukėme color-contrastfunkciją į „Bootstrap“. Jis naudoja WCAG kontrasto santykio algoritmą kontrasto slenksčiams apskaičiuoti pagal santykinį skaistį spalvų erdvėje , sRGBkad 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-svgfunkciją, kad išvengtume <, >ir simbolių. #Naudojant escape-svgfunkciją, duomenų URI turi būti cituojami.

Pridėti ir atimti funkcijos

CSS funkcijai apvynioti naudojame ir addfunkcijas . 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.subtractcalc0calccalc(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-schemedaugialypės terpės užklausos sutrumpintas mišinys, palaikantis light, darkir 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
  }
}