Sass

Sèvi ak fichye sous Sass nou yo pou pwofite varyab, kat, mixin, ak fonksyon pou ede w bati pi vit ak pèsonalize pwojè w la.

Nan paj sa a

Sèvi ak dosye sous Sass nou yo pou pwofite varyab, kat, mixin, ak plis ankò.

Estrikti dosye

Chak fwa sa posib, evite modifye dosye debaz Bootstrap yo. Pou Sass, sa vle di kreye pwòp stylesheet ou ki enpòte Bootstrap pou ou ka modifye ak pwolonje li. Si w ap itilize yon manadjè pake tankou npm, w ap gen yon estrikti dosye ki sanble sa a:

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

Si w te telechaje fichye sous nou yo epi w pa itilize yon manadjè pakè, w ap vle kreye yon bagay ki sanble ak estrikti sa a lamen, pou w kenbe dosye sous Bootstrap yo separe de pwòp pa w yo.

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

Enpòte

Nan custom.scss, ou pral enpòte dosye Sass sous Bootstrap yo. Ou gen de opsyon: enkli tout Bootstrap, oswa chwazi pati ou bezwen yo. Nou ankouraje lèt la, menm si ou dwe konnen gen kèk kondisyon ak depandans atravè eleman nou yo. W ap bezwen tou mete kèk JavaScript pou grefon nou yo.

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

Avèk konfigirasyon sa a an plas, ou ka kòmanse modifye nenpòt nan varyab Sass yo ak kat nan custom.scss. Ou kapab tou kòmanse ajoute pati nan Bootstrap anba // Optionalseksyon an jan sa nesesè. Nou sijere pou w sèvi ak pil enpòte plen nan bootstrap.scssdosye nou an kòm pwen depa w.

Defo varyab

Chak varyab Sass nan Bootstrap gen ladan !defaultdrapo a ki pèmèt ou pase sou valè default varyab la nan pwòp Sass ou san yo pa modifye kòd sous Bootstrap la. Kopi epi kole varyab yo jan sa nesesè, modifye valè yo, epi retire !defaultdrapo a. Si yon varyab deja te asiyen, Lè sa a, li pa pral re-asiyen pa valè yo default nan Bootstrap.

W ap jwenn lis konplè varyab Bootstrap yo nan scss/_variables.scss. Gen kèk varyab yo mete sou null, varyab sa yo pa bay pwopriyete a sof si yo pase sou plas nan konfigirasyon ou a.

Chanjman varyab dwe vini apre fonksyon nou yo enpòte, men anvan rès enpòtasyon yo.

Men yon egzanp ki chanje background-colorak colorpou <body>lè enpòte ak konpile Bootstrap atravè 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

Repete jan sa nesesè pou nenpòt varyab nan Bootstrap, ki gen ladan opsyon mondyal ki anba a.

Kòmanse ak Bootstrap atravè npm ak pwojè starter nou an! Ale nan depo modèl twbs/bootstrap-npm-starter pou wè ki jan yo bati ak Customize Bootstrap nan pwòp pwojè npm ou. Gen ladann Sass du, Autoprefixer, Stylelint, PurgeCSS, ak Bootstrap Icons.

Kat ak bouk

Bootstrap gen ladan yon ti ponyen kat Sass, pè valè kle ki fè li pi fasil pou jenere fanmi CSS ki gen rapò. Nou itilize kat Sass pou koulè nou yo, pwen kadriyaj, ak plis ankò. Menm jan ak varyab Sass, tout kat Sass yo gen ladan !defaultdrapo a epi yo ka depase ak pwolonje.

Kèk nan kat Sass nou yo fizyone nan kat vid pa default. Sa a se fè pou pèmèt ekspansyon fasil nan yon kat Sass bay yo, men li vini nan pri pou fè retire atik nan yon kat jeyografik yon ti kras pi difisil.

Modifye kat jeyografik la

Tout varyab nan $theme-colorskat la defini kòm varyab otonòm. Pou modifye yon koulè ki deja egziste nan $theme-colorskat jeyografik nou an, ajoute sa ki annapre yo nan dosye Sass koutim ou a:

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

Apre sa, varyab sa yo mete nan kat jeyografik Bootstrap la $theme-colors:

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

Ajoute sou kat la

Ajoute nouvo koulè nan $theme-colors, oswa nenpòt lòt kat, lè w kreye yon nouvo kat Sass ak valè koutim ou yo epi rantre li ak kat orijinal la. Nan ka sa a, nou pral kreye yon nouvo $custom-colorskat epi rantre li ak $theme-colors.

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

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

Retire nan kat jeyografik la

Pou retire koulè nan $theme-colors, oswa nenpòt lòt kat, itilize map-remove. Ou dwe konnen ou dwe mete $theme-colorsant egzijans nou yo jis apre definisyon li nan variablesak anvan itilizasyon li nan 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

Kle obligatwa

Bootstrap sipoze prezans kèk kle espesifik nan kat Sass jan nou itilize ak pwolonje sa yo tèt nou. Pandan w ap pèrsonalize kat yo enkli, ou ka rankontre erè kote yo te itilize yon kle kat Sass espesifik.

Pou egzanp, nou itilize primary, success, ak dangerkle soti nan $theme-colorspou lyen, bouton, ak eta fòm yo. Ranplase valè kle sa yo pa ta dwe prezante okenn pwoblèm, men retire yo ka lakòz pwoblèm konpilasyon Sass. Nan ka sa yo, w ap bezwen modifye kòd Sass ki sèvi ak valè sa yo.

Fonksyon

Koulè

Akote kat Sass nou genyen yo, koulè tèm yo ka itilize tou kòm varyab otonòm, tankou $primary.

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

Ou ka aleje oswa fè nwa koulè ak Bootstrap a tint-color()ak shade-color()fonksyon. Fonksyon sa yo pral melanje koulè ak nwa oswa blan, kontrèman ak natif natal Sass lighten()ak darken()fonksyon ki pral chanje légèreté a pa yon kantite lajan fiks, ki souvan pa mennen nan efè a vle.

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

Nan pratik, ou ta rele fonksyon an epi pase paramèt koulè ak pwa yo.

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

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

Kontras koulè

Pou satisfè egzijans kontras Gid pou Aksè ak Kontni Entènèt yo (WCAG) , otè yo dwe bay yon kontras koulè tèks minimòm 4.5:1 ak yon kontras koulè minimòm ki pa tèks 3:1 , ak kèk eksepsyon.

Pou ede ak sa a, nou enkli color-contrastfonksyon an nan Bootstrap. Li itilize algorithm rapò kontras WCAG pou kalkile papòt kontras ki baze sou luminans relatif nan yon sRGBespas koulè pou otomatikman retounen yon koulè kontras limyè ( #fff), nwa ( #212529) oswa nwa ( #000) ki baze sou koulè baz espesifye a. Fonksyon sa a itil espesyalman pou mixin oswa bouk kote w ap jenere plizyè klas.

Pou egzanp, jenere echantiyon koulè nan $theme-colorskat nou an:

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

Li kapab tou itilize pou bezwen kontras yon sèl:

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

Ou kapab tou presize yon koulè baz ak fonksyon kat koulè nou yo:

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

Chape anba SVG

Nou itilize escape-svgfonksyon an pou chape anba <, >ak #karaktè pou imaj background SVG. Lè w ap itilize escape-svgfonksyon an, yo dwe site URI done yo.

Add ak Soustraksyon fonksyon

Nou itilize fonksyon yo addak subtractpou vlope fonksyon CSS calcla. Objektif prensipal fonksyon sa yo se pou evite erè lè 0yo pase yon valè "unitless" nan yon calcekspresyon. Ekspresyon tankou calc(10px - 0)ap retounen yon erè nan tout navigatè, malgre yo matematik kòrèk.

Egzanp kote kalkil la valab:

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

Egzanp kote kalkil la pa valab:

$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

Anyè nou an scss/mixins/gen yon tòn mixin ki pouvwa pati nan Bootstrap epi yo ka itilize tou atravè pwòp pwojè ou a.

Koulè rapid

Yon mixin kout pou prefers-color-schemedemann medya yo disponib ak sipò pou light, dark, ak plan koulè koutim.

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