Sass

Gamita ang among tinubdan nga Sass nga mga file aron mapahimuslan ang mga variable, mapa, mixin, ug mga function aron matabangan ka nga magtukod og mas paspas ug ipahiangay ang imong proyekto.

Niini nga panid

Gamita ang among tinubdan nga Sass files aron mapahimuslan ang mga variable, mapa, mixins, ug uban pa.

Istruktura sa file

Kung mahimo, likayi ang pag-usab sa mga core files sa Bootstrap. Alang sa Sass, nagpasabot kana sa paghimo sa imong kaugalingong stylesheet nga nag-import sa Bootstrap aron imong mabag-o ug mapalawig kini. Sa pag-ingon nga naggamit ka usa ka manager sa package sama sa npm, adunay usa ka istruktura sa file nga ingon niini:

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

Kung na-download nimo ang among mga gigikanan nga mga file ug wala mogamit usa ka manager sa package, gusto nimo nga mano-mano ang paghimo usa ka butang nga parehas sa kana nga istruktura, nga gitago ang mga gigikanan nga file sa Bootstrap nga lahi sa imong kaugalingon.

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

Pag-import

Sa imong custom.scss, imong i-import ang gigikanan sa Bootstrap nga mga file nga Sass. Adunay ka duha ka kapilian: iapil ang tanan nga Bootstrap, o pilia ang mga bahin nga kinahanglan nimo. Among gidasig ang naulahi, bisan pa nga nahibal-an nga adunay pipila nga mga kinahanglanon ug dependency sa among mga sangkap. Kinahanglan mo usab nga ilakip ang pipila ka JavaScript para sa among mga plugins.

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

Uban niana nga setup sa lugar, mahimo nimong sugdan ang pag-usab sa bisan unsang Sass variables ug mga mapa sa imong custom.scss. Mahimo ka usab magsugod sa pagdugang mga bahin sa Bootstrap sa ilawom sa // Optionalseksyon kung gikinahanglan. Gisugyot namon nga gamiton ang tibuuk nga stack sa pag-import gikan sa among bootstrap.scssfile ingon imong pagsugod.

Variable default

Ang matag variable sa Sass sa Bootstrap naglakip sa !defaultbandila nga nagtugot kanimo sa pag-override sa default nga bili sa variable sa imong kaugalingon nga Sass nga wala mag-usab sa source code sa Bootstrap. Kopyaha ug idikit ang mga variable kung gikinahanglan, usba ang ilang mga kantidad, ug kuhaa ang !defaultbandila. Kung na-assign na ang usa ka variable, dili na kini i-assign sa default values sa Bootstrap.

Makita nimo ang kompleto nga lista sa mga variable sa Bootstrap sa scss/_variables.scss. Ang ubang mga baryable gitakda sa null, kini nga mga baryable dili magpagawas sa propyedad gawas kon kini ma-override sa imong configuration.

Ang mga pagbag-o sa pagbag-o kinahanglan nga moabut pagkahuman ma-import ang among mga gimbuhaton, apan sa wala pa ang nahabilin nga mga import.

Ania ang usa ka pananglitan nga nagbag-o sa background-colorug coloralang sa <body>kung nag-import ug nag-compile sa Bootstrap pinaagi sa 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

Balika kung gikinahanglan alang sa bisan unsang variable sa Bootstrap, lakip ang global nga mga kapilian sa ubos.

Pagsugod sa Bootstrap pinaagi sa npm sa among starter nga proyekto! Pangadto sa twbs/bootstrap-npm-starter template repository aron makita kung giunsa paghimo ug pag-customize ang Bootstrap sa imong kaugalingon nga npm nga proyekto. Naglakip sa Sass compiler, Autoprefixer, Stylelint, PurgeCSS, ug Bootstrap Icons.

Mga mapa ug mga galong

Ang Bootstrap naglakip sa pipila ka mga mapa sa Sass, mahinungdanong mga pares sa bili nga nagpasayon sa pagmugna og mga pamilya sa may kalabutan nga CSS. Gigamit namo ang mga mapa sa Sass para sa among mga kolor, mga breakpoint sa grid, ug uban pa. Sama sa mga variable sa Sass, ang tanan nga mga mapa sa Sass naglakip sa !defaultbandila ug mahimong ma-overridden ug mapalawig.

Ang pipila sa among mga mapa sa Sass gihiusa sa mga walay sulod nga mga mapa pinaagi sa default. Gihimo kini aron tugotan ang dali nga pagpalapad sa gihatag nga mapa sa Sass, apan moabut sa gasto sa paghimo sa pagtangtang sa mga butang gikan sa usa ka mapa nga labi ka lisud.

Usba ang mapa

Ang tanan nga mga variable sa $theme-colorsmapa gihubit ingon mga standalone variable. Aron usbon ang naglungtad nga kolor sa among $theme-colorsmapa, idugang ang mosunod sa imong naandan nga Sass file:

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

Sa ulahi, kini nga mga variable gibutang sa $theme-colorsmapa sa Bootstrap:

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

Idugang sa mapa

Pagdugang ug bag-ong mga kolor sa $theme-colors, o bisan unsang lain nga mapa, pinaagi sa paghimo og bag-ong mapa sa Sass nga adunay imong naandan nga mga kantidad ug isagol kini sa orihinal nga mapa. Sa kini nga kaso, maghimo kami usa ka bag-ong $custom-colorsmapa ug isagol kini sa $theme-colors.

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

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

Kuhaa gikan sa mapa

Aron makuha ang mga kolor gikan sa $theme-colors, o bisan unsang ubang mapa, gamita ang map-remove. Pagmatngon nga kinahanglan nimo nga isal-ot $theme-colorstali sa among mga kinahanglanon pagkahuman sa kahulugan niini sa variablesug sa wala pa kini gamiton 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

Gikinahanglan nga mga yawe

Giangkon sa Bootstrap ang presensya sa pipila ka piho nga mga yawe sulod sa mga mapa sa Sass samtang among gigamit ug gipalapad kini sa among kaugalingon. Samtang imong i-customize ang gilakip nga mga mapa, mahimo nimong masugatan ang mga sayup kung diin gigamit ang usa ka piho nga yawe sa mapa sa Sass.

Pananglitan, among gigamit ang primary, success, ug mga dangeryawe gikan $theme-colorssa para sa mga link, buton, ug porma nga estado. Ang pag-ilis sa mga kantidad niini nga mga yawe kinahanglan nga walay mga isyu, apan ang pagtangtang niini mahimong hinungdan sa mga isyu sa pag-compile sa Sass. Niini nga mga higayon, kinahanglan nimo nga usbon ang Sass code nga naggamit sa mga kantidad.

Mga gimbuhaton

Mga kolor

Sunod sa mga mapa sa Sass nga naa namo, ang mga kolor sa tema mahimo usab nga gamiton isip standalone variables, sama sa $primary.

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

Mahimo nimo nga madan-agan o mangitngit ang mga kolor gamit ang Bootstrap's tint-color()ug shade-color()mga gimbuhaton. Kini nga mga gimbuhaton magsagol sa mga kolor nga adunay itom o puti, dili sama sa lumad nga Sass lighten()ug darken()mga gimbuhaton nga magbag-o sa kahayag pinaagi sa usa ka piho nga kantidad, nga kanunay dili mosangpot sa gitinguha nga 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 praktis, imong tawgon ang function ug ipasa ang mga parameter sa kolor ug gibug-aton.

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

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

Ang kalainan sa kolor

Aron makab-ot ang mga kinahanglanon sa pagtandi sa Web Content Accessibility Guidelines (WCAG) , ang mga tagsulat kinahanglang mohatag og minimum nga contrast sa kolor sa text nga 4.5:1 ug minimum nga non-text color contrast nga 3:1 , uban ang pipila ka eksepsiyon.

Aron matabangan kini, among gilakip ang color-contrastfunction sa Bootstrap. Gigamit niini ang WCAG contrast ratio algorithm para sa pagkuwenta sa contrast threshold base sa relatibong luminance sa usa ka sRGBcolor space aron awtomatikong ibalik ang kahayag ( #fff), dark ( #212529) o itom ( #000) contrast color base sa gipiho nga base color. Kini nga function labi ka mapuslanon alang sa mga mixin o mga loop diin naghimo ka daghang mga klase.

Pananglitan, aron makamugna og color swatch gikan sa among $theme-colorsmapa:

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

Mahimo usab kini gamiton alang sa usa ka kinahanglanon nga kalainan:

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

Mahimo usab nimong ipiho ang usa ka base nga kolor sa among mga function sa mapa sa kolor:

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

Pag-ikyas sa SVG

Gigamit namo ang escape-svgfunction aron makalingkawas sa <, >ug #mga karakter para sa SVG nga mga hulagway sa background. Kung gamiton ang escape-svgfunction, ang mga data URI kinahanglan nga kutlo.

Pagdugang ug Pagbawas sa mga gimbuhaton

Gigamit namo ang addug subtractmga gimbuhaton sa pagputos sa CSS calcfunction. Ang nag-unang katuyoan niini nga mga gimbuhaton mao ang paglikay sa mga sayup kung ang usa ka "walay yunit" 0nga kantidad gipasa sa usa ka calcekspresyon. Ang mga ekspresyon nga sama calc(10px - 0)magbalik og sayup sa tanan nga mga browser, bisan pa nga husto sa matematika.

Pananglitan diin ang calc balido:

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

Pananglitan diin ang calc dili balido:

$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 among scss/mixins/direktoryo adunay usa ka tonelada nga mixin nga adunay gahum sa mga bahin sa Bootstrap ug mahimo usab nga magamit sa imong kaugalingon nga proyekto.

Mga laraw sa kolor

Ang usa ka shorthand mixin alang sa prefers-color-schememedia query anaa uban sa suporta alang sa light, dark, ug custom color schemes.

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