Sass

Notaðu Sass frumskrána okkar til að nýta þér breytur, kort, blöndun og aðgerðir til að hjálpa þér að byggja hraðar og sérsníða verkefnið þitt.

Á þessari síðu

Notaðu uppruna Sass skrárnar okkar til að nýta þér breytur, kort, mixins og fleira.

Uppbygging skráa

Þegar mögulegt er, forðastu að breyta kjarnaskrám Bootstrap. Fyrir Sass þýðir það að búa til þitt eigið stílblað sem flytur inn Bootstrap svo þú getir breytt og framlengt það. Miðað við að þú sért að nota pakkastjóra eins og npm, muntu hafa skráarskipulag sem lítur svona út:

your-project/
├── scss
│   └── custom.scss
└── node_modules/
    └── bootstrap
        ├── js
        └── scss

Ef þú hefur hlaðið niður frumskránum okkar og ert ekki að nota pakkastjórnun, þá viltu búa til eitthvað svipað og þeirri uppbyggingu handvirkt og halda upprunaskrám Bootstrap aðskildum frá þínum eigin.

your-project/
├── scss
│   └── custom.scss
└── bootstrap/
    ├── js
    └── scss

Flytur inn

Í custom.scss, muntu flytja inn Sass frumskrár Bootstrap. Þú hefur tvo valkosti: láttu allt Bootstrap fylgja með eða veldu þá hluta sem þú þarft. Við hvetjum hið síðarnefnda, þó að vera meðvitaður um að það eru nokkrar kröfur og ósjálfstæði milli íhluta okkar. Þú þarft líka að láta JavaScript fylgja með viðbæturnar okkar.

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

Með þeirri uppsetningu á sínum stað geturðu byrjað að breyta hvaða Sass breytum og kortum sem er í custom.scss. Þú getur líka byrjað að bæta við hluta af Bootstrap undir // Optionalhlutanum eftir þörfum. Við mælum með því að nota allan innflutningsstafla úr skránni okkar bootstrap.scsssem upphafspunkt.

Breytileg vanskil

Sérhver Sass breyta í Bootstrap inniheldur !defaultfánann sem gerir þér kleift að hnekkja sjálfgefnu gildi breytunnar í þínum eigin Sass án þess að breyta frumkóða Bootstrap. Afritaðu og límdu breytur eftir þörfum, breyttu gildum þeirra og fjarlægðu !defaultfánann. Ef breytu hefur þegar verið úthlutað, þá verður henni ekki endurúthlutað með sjálfgefnum gildum í Bootstrap.

Þú finnur heildarlistann yfir breytur Bootstrap í scss/_variables.scss. Sumar breytur eru stilltar á null, þessar breytur gefa ekki út eignina nema þeim sé hnekkt í stillingunum þínum.

Hnekkingar breytu verða að koma eftir að aðgerðir okkar eru fluttar inn, en fyrir restina af innflutningnum.

Hér er dæmi sem breytir background-colorog colorfyrir <body>þegar flutt er inn og sett saman Bootstrap í gegnum 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

Endurtaktu eftir þörfum fyrir hvaða breytu sem er í Bootstrap, þar á meðal alþjóðlegu valkostina hér að neðan.

Byrjaðu með Bootstrap í gegnum npm með byrjunarverkefninu okkar! Farðu í twbs/bootstrap-npm-starter sniðmátsgeymsluna til að sjá hvernig á að smíða og sérsníða Bootstrap í þínu eigin npm verkefni. Inniheldur Sass þýðanda, Autoprefixer, Stylelint, PurgeCSS og Bootstrap Icons.

Kort og lykkjur

Bootstrap inniheldur handfylli af Sass kortum, lykilgildapör sem gera það auðveldara að búa til fjölskyldur af tengdum CSS. Við notum Sass kort fyrir litina okkar, rist brotpunkta og fleira. Rétt eins og Sass breytur, innihalda öll Sass kort !defaultfánann og hægt er að hnekkja þeim og framlengja.

Sum Sass korta okkar eru sjálfgefið sameinuð í tóm. Þetta er gert til að auðvelda útvíkkun á tilteknu Sass korti, en það kostar að gera það aðeins erfiðara að fjarlægja hluti af kortinu.

Breyta korti

Allar breytur á $theme-colorskortinu eru skilgreindar sem sjálfstæðar breytur. Til að breyta núverandi lit á $theme-colorskortinu okkar skaltu bæta eftirfarandi við sérsniðna Sass skrána þína:

$primary: #0074d9;
$danger: #ff4136;

Síðar eru þessar breytur stilltar á $theme-colorskortinu Bootstrap:

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

Bæta við kort

Bættu nýjum litum við $theme-colors, eða hvaða annað kort sem er, með því að búa til nýtt Sass kort með sérsniðnum gildum þínum og sameina það upprunalega kortinu. Í þessu tilviki munum við búa til nýtt $custom-colorskort og sameina það $theme-colors.

// Create your own map
$custom-colors: (
  "custom-color": #900
);

// Merge the maps
$theme-colors: map-merge($theme-colors, $custom-colors);

Fjarlægja af kortinu

Til að fjarlægja liti af $theme-colors, eða einhverju öðru korti, notaðu map-remove. Athugaðu að þú verður að setja inn $theme-colorsá milli krafna okkar rétt eftir skilgreiningu þess í variablesog fyrir notkun þess í 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

Nauðsynlegir lyklar

Bootstrap gerir ráð fyrir að einhverjir sérstakir lyklar séu til staðar í Sass kortum eins og við notuðum og framlengdu þá sjálf. Þegar þú sérsníður kortin sem fylgja með, gætirðu rekist á villur þar sem verið er að nota tiltekinn Sass kortalykil.

Til dæmis notum við primary, success, og dangerlyklana frá $theme-colorsfyrir tengla, hnappa og eyðublöð. Það ætti ekki að valda neinum vandamálum að skipta út gildum þessara lykla, en að fjarlægja þá gæti valdið Sass safnvandamálum. Í þessum tilvikum þarftu að breyta Sass kóðanum sem notar þessi gildi.

Aðgerðir

Litir

Við hliðina á Sass kortunum sem við höfum, er einnig hægt að nota þemaliti sem sjálfstæðar breytur, eins og $primary.

.custom-element {
  color: $gray-100;
  background-color: $dark;
}

Þú getur létta eða dökkna liti með Bootstrap's tint-color()og shade-color()aðgerðum. Þessar aðgerðir munu blanda litum saman við svart eða hvítt, ólíkt innfæddum Sass lighten()og darken()aðgerðum sem munu breyta léttleikanum um ákveðið magn, sem oft leiðir ekki til tilætluðra áhrifa.

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

Í reynd myndirðu kalla aðgerðina og senda inn lita- og þyngdarbreytur.

.custom-element {
  color: tint-color($primary, 10%);
}

.custom-element-2 {
  color: shade-color($danger, 30%);
}

Litaskil

Til þess að uppfylla kröfur um birtuskil á vefefnisaðgengi (WCAG) verða höfundar að gefa upp lágmarksskilaskil textalita sem er 4,5:1 og lágmarkslitaskilaskil án texta 3:1 , með örfáum undantekningum.

Til að hjálpa við þetta, tókum við color-contrastaðgerðina inn í Bootstrap. Það notar reiknirit WCAG birtuskilahlutfalls til að reikna út birtuskil byggt á hlutfallslegri birtu í litarými sRGBtil að skila sjálfkrafa ljósum ( #fff), dökkum ( #212529) eða svörtum ( #000) birtuskilalit byggt á tilgreindum grunnlit. Þessi aðgerð er sérstaklega gagnleg fyrir mixins eða lykkjur þar sem þú ert að búa til marga flokka.

Til dæmis, til að búa til litasýni úr $theme-colorskortinu okkar:

@each $color, $value in $theme-colors {
  .swatch-#{$color} {
    color: color-contrast($value);
  }
}

Það er einnig hægt að nota fyrir stakar birtuskilþarfir:

.custom-element {
  color: color-contrast(#000); // returns `color: #fff`
}

Þú getur líka tilgreint grunnlit með litakortaaðgerðum okkar:

.custom-element {
  color: color-contrast($dark); // returns `color: #fff`
}

Flýja SVG

Við notum escape-svgaðgerðina til að flýja <, >og #stafi fyrir SVG bakgrunnsmyndir. Þegar escape-svgaðgerðin er notuð þarf að gefa upp gagnavefslóð.

Bæta við og draga frá aðgerðir

Við notum addog subtractaðgerðirnar til að vefja CSS calcaðgerðina. Megintilgangur þessara aðgerða er að forðast villur þegar „einingalaust“ 0gildi er sent inn í calctjáningu. Tjáning eins og calc(10px - 0)mun skila villu í öllum vöfrum, þrátt fyrir að vera stærðfræðilega réttar.

Dæmi þar sem útreikningurinn er gildur:

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

Dæmi þar sem útreikningurinn er ógildur:

$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

Skráin okkar scss/mixins/hefur fullt af blöndunum sem knýja hluta Bootstrap og er einnig hægt að nota í þínu eigin verkefni.

Litasamsetning

Stutt blöndun fyrir prefers-color-schemefjölmiðlafyrirspurnina er fáanleg með stuðningi fyrir light, dark, og sérsniðnar litasamsetningar.

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