Twe kɔ emu nsɛm atitiriw no so Twe kɔ docs navigation so
in English

Sass

Fa yɛn source Sass fael ahorow no di dwuma fa fa variables, maps, mixins, ne functions di dwuma na aboa wo ma woakyekye ntɛmntɛm na woayɛ wo project no sɛnea wopɛ.

Wɔ kratafa yi so

Fa yɛn source Sass fael ahorow no di dwuma fa fa variables, maps, mixins, ne nea ɛkeka ho di dwuma.

Fael nhyehyɛe

Bere biara a ɛbɛyɛ yiye no, kwati sɛ wobɛsesa Bootstrap no fael atitiriw no. Sass deɛ, ɛno kyerɛ sɛ wobɛbɔ w’ankasa stylesheet a ɛde Bootstrap ba sɛdeɛ ɛbɛyɛ a wobɛtumi asesa na woatrɛw mu. Sɛ yɛfa no sɛ wode package manager te sɛ npm redi dwuma a, wobɛnya fael nhyehyɛɛ a ɛte sɛ yei:

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

Sɛ woatwe yɛn fibea fael ahorow no na woamfa package manager nni dwuma a, wobɛpɛ sɛ wode nsa hyehyɛ biribi a ɛte sɛ saa nhyehyɛe no, na ama Bootstrap fibea fael ahorow no ayɛ soronko wɔ wo de ho.

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

Nneɛma a wɔde ba amannɔne

Wɔ wo custom.scss, wobɛfa Bootstrap no source Sass fael ahorow no aba. Wowɔ akwan abien a wobɛfa so: fa Bootstrap no nyinaa ka ho, anaa paw afã horow a wuhia. Yɛhyɛ nea etwa to no nkuran, ɛwom sɛ hu sɛ ahwehwɛde ne nneɛma bi a egyina so wɔ yɛn afã horow no nyinaa mu de. Ɛho behia nso sɛ wode JavaScript bi ka ho ma yɛn plugins no.

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

Sɛ saa nhyehyɛe no wɔ hɔ a, wubetumi afi ase asesa Sass nsakrae ne asase mfonini ahorow a ɛwɔ wo custom.scss. Wubetumi nso afi ase de Bootstrap no afã horow aka // Optionalɔfã no ase sɛnea ɛho hia. Yɛhyɛ nyansa sɛ fa import stack a edi mũ no fi yɛn bootstrap.scssfael no mu di dwuma sɛ wo mfiase.

Nneɛma a ɛsakra no defaults

Sass variable biara a ɛwɔ Bootstrap mu no de !defaultfrankaa no ka ho a ɛma wo kwan ma wotumi bu variable no default value no so wɔ w’ankasa Sass mu a wonsesa Bootstrap no source code no. Copy na fa variables no hyɛ mu sɛnea ɛho hia, sesa wɔn values, na yi !defaultfrankaa no fi hɔ. Sɛ wɔde variable bi ahyɛ mu dedaw a, ɛnde wɔrensan mfa default values ​​a ɛwɔ Bootstrap mu no mma.

Wobɛhunu Bootstrap no nsakraeɛ no nyinaa wɔ scss/_variables.scss. Wɔde nsakraeɛ binom ahyɛ null, saa nsakraeɛ yi nnyi agyapadeɛ no adi gye sɛ wɔabɔ so wɔ wo nhyehyeɛ no mu.

Ɛsɛ sɛ variable overrides ba bere a wɔde yɛn dwumadi ahorow no aba akyi, nanso ansa na wɔde aba no nkae no aba.

Nhwɛsoɔ bi a ɛsesa background-colorne colorma no nie <body>bere a wode Bootstrap reba na woreboaboa ano via 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

Tia mu sɛnea ɛho hia ma nsakrae biara wɔ Bootstrap mu, a wiase nyinaa nhyehyɛe ahorow a ɛwɔ ase ha no ka ho.

Fi ase ne Bootstrap via npm ne yɛn starter project! Fa w’ani kyerɛ twbs/bootstrap-npm-starter template repository no mu kɔhwɛ sɛnea wobɛkyekye na woayɛ Bootstrap wɔ w’ankasa npm adwuma no mu. Sass compiler, Autoprefixer, Stylelint, PurgeCSS, ne Bootstrap Ahyɛnsodeɛ ka ho.

Asase mfonini ne loop ahorow

Bootstrap no ka Sass maps nsa kakraa bi, key value pairs a ɛma ɛyɛ mmerɛw sɛ wobɛhyehyɛ mmusua a ɛfa CSS ho. Yɛde Sass maps di dwuma ma yɛn kɔla ahorow, grid breakpoints, ne nea ɛkeka ho. Te sɛ Sass variables no, Sass maps nyinaa de !defaultfrankaa no ka ho na wobetumi abɔ so na wɔatrɛw mu.

Yɛn Sass maps no bi yɛ nea wɔaka abom ayɛ no nea hwee nni mu default so. Wɔyɛ eyi sɛnea ɛbɛyɛ a wobetumi atrɛw Sass asase mfonini bi a wɔde ama no mu mmerɛw, nanso ɛba wɔ ɛka a ɛbɛma nneɛma a wobeyi afi asase mfonini so no ayɛ den kakra.

Sesa asase mfonini

Wɔakyerɛkyerɛ nsakraeɛ a ɛwɔ $theme-colorsasase mfonini no mu nyinaa mu sɛ nsakraeɛ a ɛgyina hɔ ma ne ho. Sɛ wopɛ sɛ wosakra kɔla bi a ɛwɔ hɔ dedaw wɔ yɛn $theme-colorsmap no mu a, fa nea edidi so yi ka wo Sass fael a woahyɛ da ayɛ no ho:

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

Akyiri yi, wɔde saa nsakrae ahorow yi si Bootstrap $theme-colorsmap no mu:

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

Fa ka asase mfonini ho

Fa kɔla foforo ka $theme-colors, anaa asase mfonini foforo biara ho, denam Sass asase mfonini foforo a wobɛyɛ a wo gyinapɛn ahorow a wɔahyɛ da ayɛ no ka ho na wode aka asase mfonini a edi kan no ho no so. Sɛ ɛba saa a, yɛbɛyɛ $custom-colorsmap foforo na yɛde abɔ mu ne $theme-colors.

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

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

Yi fi asase mfonini so

Sɛ wopɛ sɛ wuyi kɔla ahorow fi $theme-colors, anaa asase mfonini foforo biara mu a, fa map-remove. Hu sɛ ɛsɛ sɛ wode hyɛ yɛn ahwehwɛde ne nea yebetumi apaw ntam:

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

Nsafe a wɔhwehwɛ

Bootstrap fa no sɛ nsafe pɔtee bi wɔ hɔ wɔ Sass map ahorow mu sɛnea yɛde dii dwuma na yɛn ankasa yɛtrɛw eyinom mu. Bere a woreyɛ asase mfonini ahorow a ɛka ho no ho nhyehyɛe no, wubetumi ahyia mfomso ahorow wɔ baabi a wɔde Sass asase mfonini pɔtee bi safe redi dwuma no.

Sɛ nhwɛso no, yɛde primary, success, ne dangernsafe a efi mu di dwuma $theme-colorsma link ahorow, bɔtn ahorow, ne fom tebea horow. Ɛnsɛ sɛ saa nsafe yi botae ahorow a wobɛsesa no de nsɛm biara ba, nanso sɛ woyi fi hɔ a, ebetumi de Sass nhyiam ho nsɛm aba. Wɔ saa nsɛm yi mu no, ɛho behia sɛ wosakra Sass koodu a ɛde saa gyinapɛn ahorow no di dwuma no.

Dwumadi ahorow

Kɔla ahorow

Sass maps a yɛwɔ no nkyɛn no, wobetumi de asɛmti kɔla ahorow nso adi dwuma sɛ standalone variables, te sɛ $primary.

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

Wubetumi de Bootstrap's tint-color()ne shade-color()dwumadi ahorow ayɛ kɔla ahorow a ɛyɛ hann anaasɛ ayɛ tuntum. Saa dwumadie yi bɛfrafra kɔla ne tuntum anaa fitaa, ɛnte sɛ Sass kurom lighten()ne darken()dwumadie a ɛbɛsesa hann no dodoɔ a wɔahyɛ ato hɔ, a ɛtaa mma nsunsuansoɔ a wɔpɛ no nkɔ.

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

Wɔ adeyɛ mu no, anka wobɛfrɛ adwuma no na woatwam wɔ kɔla ne mu duru parameters no mu.

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

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

Kɔla ahorow a ɛne ne ho bɔ abira

Sɛnea ɛbɛyɛ a wobedu WCAG 2.0 gyinapɛn ahorow a ɛfa kɔla ahorow a ɛne ne ho bɔ abira ho no ho no, ɛsɛ sɛ akyerɛwfo de nsonsonoe nsusuwii a anyɛ yiye koraa no ɛyɛ 4.5:1 ma, gye kakraa bi pɛ.

Dwumadi foforo a yɛde ka Bootstrap ho ne kɔla a ɛne ne ho bɔ abira adwuma, color-contrast. Ɛde WCAG 2.0 algorithm no di dwuma de bu nsonsonoeɛ aboboano a egyina hann a ɛfa ho wɔ sRGBkɔla ahunmu so de san de hann ( #fff), esum ( #212529) anaa tuntum ( #000) nsonsonoeɛ kɔla a egyina kɔla a wɔakyerɛ no so san ba no ara kwa. Saa dwumadie yi ho wɔ mfasoɔ titire ma mixins anaa loops a woreyɛ class ahodoɔ pii.

Sɛ nhwɛso no, sɛ wopɛ sɛ woyɛ kɔla nhwɛsode ahorow fi yɛn $theme-colorsasase mfonini no so a:

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

Wobetumi nso de adi dwuma ama ahiade ahorow a ɛfa nsonsonoe a ɛba pɛnkoro ho:

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

Wubetumi nso de yɛn kɔla map dwumadi ahorow no akyerɛ kɔla a wɔde gyina so:

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

Gwane SVG

Yɛde escape-svgdwumadie no guan <, >ne #nkyerɛwdeɛ ma SVG akyi mfonini. Sɛ wode escape-svgdwumadie no redi dwuma a, ɛsɛ sɛ wofa data URI ahodoɔ no ka.

Dwumadi ahorow a wɔde ka ho ne nea wɔtwe fi mu

Yɛde addne subtractdwumadie no di dwuma de kyekyere CSS calcdwumadie no. Dwumadi ahorow yi atirimpɔw titiriw ne sɛ ɛbɛkwati mfomso bere a wɔde 0botae bi a “ɛnyɛ biako” rekɔ calcasɛmfua bi mu no. Nsɛmfua te sɛ calc(10px - 0)bɛsan de mfomso aba wɔ browser ahorow nyinaa mu, ɛmfa ho sɛ ɛyɛ akontaabu a ɛteɛ.

Nhwɛsoɔ a ɛwɔ baabi a calc no yɛ adwuma:

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

Nhwɛsoɔ a ɛwɔ baabi a calc no nyɛ adwuma:

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

Nneɛma a wɔde frafra

Yɛn scss/mixins/directory no wɔ mixins ton a ɛma Bootstrap afã horow ahoɔden na wobetumi nso de adi dwuma wɔ w’ankasa adwuma no nyinaa mu.

Kɔla ahorow a wɔde yɛ nneɛma

Nkyerɛwee tiawa mixin ma prefers-color-schememedia asɛmmisa no wɔ hɔ a ɛboa light, dark, ne kɔla nhyehyɛe ahorow a wɔahyɛ da ayɛ.

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