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 gigikanan nga mga file ug wala mogamit usa ka manager sa pakete, gusto nimo nga mano-mano ang pag-setup sa 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";
@import "../node_modules/bootstrap/scss/mixins";

// 4. Include any optional Bootstrap components as you like
@import "../node_modules/bootstrap/scss/root";
@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";

// 5. Add additional custom code here

Sa kana nga setup sa lugar, mahimo nimong sugdan ang pag-usab sa bisan unsang mga variable ug mapa sa Sass sa imong custom.scss. Mahimo ka usab magsugod sa pagdugang mga bahin sa Bootstrap sa ilawom sa // Optionalseksyon kung gikinahanglan. Among gisugyot nga gamiton ang bug-os nga import stack gikan sa among bootstrap.scssfile isip 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 human 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/mixins";

// Optional Bootstrap components here
@import "../node_modules/bootstrap/scss/root";
@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 unsaon paghimo ug pag-customize sa Bootstrap sa imong kaugalingong npm project. 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, importante nga 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 gisagol 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 nga 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 gamit ang 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. Hibaloi nga kinahanglan nimong isulod kini tali sa among mga kinahanglanon ug mga kapilian:

// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

$theme-colors: map-remove($theme-colors, "info", "light", "dark");

// Optional
@import "../node_modules/bootstrap/scss/root";
@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 WCAG 2.0 accessibility standards alang sa color contrast , ang mga awtor kinahanglang maghatag ug contrast ratio nga labing menos 4.5:1 , uban ang pipila ka eksepsiyon.

Ang dugang nga function nga among gilakip sa Bootstrap mao ang color contrast function, color-contrast. Gigamit niini ang WCAG 2.0 algorithm para sa pagkalkula sa contrast threshold base sa relatibong luminance sa usa ka sRGBcolorspace 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 namon ang addug subtractmga gimbuhaton aron maputos ang function sa CSS calc. Ang panguna nga 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 nga 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
  }
}