Sass

Gamitin ang aming source na Sass file para samantalahin ang mga variable, mapa, mixin, at function para matulungan kang bumuo ng mas mabilis at i-customize ang iyong proyekto.

Sa pahinang ito

Gamitin ang aming source na Sass file para samantalahin ang mga variable, mapa, mixin, at higit pa.

Istraktura ng file

Hangga't maaari, iwasang baguhin ang mga pangunahing file ng Bootstrap. Para sa Sass, nangangahulugan iyon ng paggawa ng sarili mong stylesheet na nag-i-import ng Bootstrap para mabago at ma-extend mo ito. Ipagpalagay na gumagamit ka ng manager ng package tulad ng npm, magkakaroon ka ng istraktura ng file na ganito ang hitsura:

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

Kung na-download mo ang aming mga source file at hindi gumagamit ng package manager, gugustuhin mong manu-manong gumawa ng katulad ng istrukturang iyon, na pinapanatili ang mga source file ng Bootstrap na hiwalay sa iyong sarili.

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

Ini-import

Sa iyong custom.scss, mag-i-import ka ng pinagmulang Sass file ng Bootstrap. Mayroon kang dalawang pagpipilian: isama ang lahat ng Bootstrap, o piliin ang mga bahagi na kailangan mo. Hinihikayat namin ang huli, kahit na magkaroon ng kamalayan na mayroong ilang mga kinakailangan at dependency sa aming mga bahagi. Kakailanganin mo ring magsama ng ilang JavaScript para sa aming mga plugin.

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

Kapag nakalagay ang setup na iyon, maaari mong simulan na baguhin ang alinman sa mga variable at mapa ng Sass sa iyong custom.scss. Maaari ka ring magsimulang magdagdag ng mga bahagi ng Bootstrap sa ilalim ng // Optionalseksyon kung kinakailangan. Iminumungkahi namin ang paggamit ng buong stack ng pag-import mula sa aming bootstrap.scssfile bilang iyong panimulang punto.

Mga default ng variable

Kasama sa bawat Sass variable sa Bootstrap ang !defaultflag na nagbibigay-daan sa iyong i-override ang default na value ng variable sa sarili mong Sass nang hindi binabago ang source code ng Bootstrap. Kopyahin at i-paste ang mga variable kung kinakailangan, baguhin ang kanilang mga halaga, at alisin ang !defaultflag. Kung naitalaga na ang isang variable, hindi na ito muling itatalaga ng mga default na value sa Bootstrap.

Makikita mo ang kumpletong listahan ng mga variable ng Bootstrap sa scss/_variables.scss. Nakatakda ang ilang variable sa null, hindi ilalabas ng mga variable na ito ang property maliban na lang kung ma-override ang mga ito sa iyong configuration.

Ang mga override ng variable ay dapat na dumating pagkatapos ma-import ang aming mga function, ngunit bago ang iba pang mga pag-import.

Narito ang isang halimbawa na nagbabago sa background-colorat colorpara sa <body>kapag ini-import at kino-compile ang Bootstrap sa pamamagitan ng 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

Ulitin kung kinakailangan para sa anumang variable sa Bootstrap, kasama ang mga pandaigdigang opsyon sa ibaba.

Magsimula sa Bootstrap sa pamamagitan ng npm gamit ang aming panimulang proyekto! Pumunta sa twbs/bootstrap-npm-starter template repository para makita kung paano bumuo at mag-customize ng Bootstrap sa sarili mong npm project. May kasamang Sass compiler, Autoprefixer, Stylelint, PurgeCSS, at Bootstrap Icon.

Mga mapa at mga loop

Kasama sa Bootstrap ang ilang mga mapa ng Sass, mga pares ng pangunahing halaga na nagpapadali sa pagbuo ng mga pamilya ng nauugnay na CSS. Gumagamit kami ng mga mapa ng Sass para sa aming mga kulay, mga breakpoint ng grid, at higit pa. Katulad ng mga variable ng Sass, kasama sa lahat ng mapa ng Sass ang !defaultflag at maaaring i-override at palawigin.

Ang ilan sa aming mga mapa ng Sass ay pinagsama sa mga walang laman bilang default. Ginagawa ito upang bigyang-daan ang madaling pagpapalawak ng isang ibinigay na mapa ng Sass, ngunit ito ay may halaga na gawing mas mahirap ang pag- alis ng mga item mula sa isang mapa.

Baguhin ang mapa

Ang lahat ng mga variable sa $theme-colorsmapa ay tinukoy bilang mga standalone na variable. Upang baguhin ang isang umiiral na kulay sa aming $theme-colorsmapa, idagdag ang sumusunod sa iyong custom na Sass file:

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

Sa paglaon, ang mga variable na ito ay nakatakda sa $theme-colorsmapa ng Bootstrap:

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

Idagdag sa mapa

Magdagdag ng mga bagong kulay sa $theme-colors, o anumang iba pang mapa, sa pamamagitan ng paglikha ng bagong mapa ng Sass gamit ang iyong mga custom na halaga at pagsasama nito sa orihinal na mapa. Sa kasong ito, gagawa kami ng bagong $custom-colorsmapa at pagsasamahin ito sa $theme-colors.

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

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

Alisin sa mapa

Upang alisin ang mga kulay mula sa $theme-colors, o anumang iba pang mapa, gamitin ang map-remove. Magkaroon ng kamalayan na dapat mong ipasok $theme-colorssa pagitan ng aming mga kinakailangan pagkatapos lamang ng kahulugan nito sa variablesat bago ang paggamit nito sa 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

Mga kinakailangang susi

Ipinapalagay ng Bootstrap ang pagkakaroon ng ilang partikular na susi sa loob ng mga mapa ng Sass habang kami mismo ang gumagamit at nagpapalawak ng mga ito. Habang kino-customize mo ang mga kasamang mapa, maaari kang makatagpo ng mga error kung saan ginagamit ang isang partikular na key ng Sass map.

Halimbawa, ginagamit namin ang primary, success, at mga dangerkey mula $theme-colorssa para sa mga link, button, at form states. Ang pagpapalit sa mga value ng mga key na ito ay hindi dapat magpakita ng mga isyu, ngunit ang pag-alis sa mga ito ay maaaring magdulot ng mga isyu sa Sass compilation. Sa mga pagkakataong ito, kakailanganin mong baguhin ang Sass code na gumagamit ng mga value na iyon.

Mga pag-andar

Mga kulay

Sa tabi ng mga mapa ng Sass na mayroon kami, maaari ding gamitin ang mga kulay ng tema bilang mga standalone na variable, tulad ng $primary.

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

Maaari kang magpagaan o magpadilim ng mga kulay gamit ang Bootstrap's tint-color()at mga shade-color()function. Ang mga function na ito ay maghahalo ng mga kulay sa itim o puti, hindi tulad ng Sass' native lighten()at mga darken()function na magpapabago sa liwanag ng isang nakapirming halaga, na kadalasan ay hindi humahantong sa nais na epekto.

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

Sa pagsasagawa, tatawagan mo ang function at ipasa ang mga parameter ng kulay at timbang.

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

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

Contrast ng kulay

Upang matugunan ang mga kinakailangan sa kaibahan ng Web Content Accessibility Guidelines (WCAG) , ang mga may-akda ay dapat magbigay ng pinakamababang contrast ng kulay ng text na 4.5:1 at isang minimum na contrast ng kulay na hindi teksto na 3:1 , na may napakakaunting mga pagbubukod.

Upang makatulong dito, isinama namin ang color-contrastfunction sa Bootstrap. Ginagamit nito ang WCAG contrast ratio algorithm para sa pagkalkula ng contrast threshold batay sa relatibong luminance sa isang sRGBcolor space upang awtomatikong magbalik ng liwanag ( #fff), madilim ( #212529) o itim ( #000) contrast na kulay batay sa tinukoy na kulay ng base. Ang function na ito ay lalong kapaki-pakinabang para sa mga mixin o loop kung saan ka bumubuo ng maraming klase.

Halimbawa, upang makabuo ng mga color swatch mula sa aming $theme-colorsmapa:

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

Maaari rin itong gamitin para sa isang beses na pangangailangan sa kaibahan:

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

Maaari ka ring tumukoy ng base na kulay sa aming mga function ng color map:

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

Tumakas sa SVG

Ginagamit namin ang escape-svgfunction upang makatakas sa <, >at mga #character para sa mga larawan sa background ng SVG. Kapag ginagamit ang escape-svgfunction, dapat na quote ang mga URI ng data.

Magdagdag at Magbawas ng mga function

Ginagamit namin ang addat subtractfunction para i-wrap ang CSS calcfunction. Ang pangunahing layunin ng mga function na ito ay upang maiwasan ang mga error kapag ang isang "walang yunit" 0na halaga ay ipinasa sa isang calcexpression. Ang mga expression na tulad calc(10px - 0)ay magbabalik ng error sa lahat ng browser, sa kabila ng pagiging tama sa matematika.

Halimbawa kung saan wasto ang calc:

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

Halimbawa kung saan hindi wasto ang calc:

$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

Ang aming scss/mixins/direktoryo ay may isang toneladang mixin na nagpapagana sa mga bahagi ng Bootstrap at maaari ding gamitin sa iyong sariling proyekto.

Mga scheme ng kulay

Available ang shorthand mixin para sa prefers-color-schememedia query na may suporta para sa light, dark, at mga custom na color scheme.

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