Sass

Jiri faịlụ Sass isi mmalite anyị were uru nke mgbanwe, maapụ, mixins na ọrụ nyere gị aka wuo ngwa ngwa na hazie ọrụ gị.

Na ibe a

Jiri faịlụ Sass isi mmalite anyị were ohere mgbanwe, maapụ, mixins na ndị ọzọ.

Ọdịdị faịlụ

Mgbe ọ bụla enwere ike, zere imegharị faịlụ isi Bootstrap. Maka Sass, nke ahụ pụtara ịmepụta ụdị gị nke na-ebubata Bootstrap ka ị nwee ike gbanwee ma gbasaa ya. Na-eche na ị na-eji njikwa ngwugwu dị ka npm, ị ga-enwe nhazi faịlụ nke dị ka nke a:

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

Ọ bụrụ na ibudatala faịlụ isi mmalite anyị ma ị naghị eji njikwa ngwugwu, ị ga-achọ iji aka gị mepụta ihe yiri usoro ahụ, debe faịlụ isi mmalite Bootstrap na nke gị.

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

Na-ebubata

Na nke gị custom.scss, ị ga-ebubata faịlụ Sass isi mmalite Bootstrap. Ị nwere nhọrọ abụọ: tinye ihe niile Bootstrap, ma ọ bụ họrọ akụkụ ndị ị chọrọ. Anyị na-akwado nke ikpeazụ, n'agbanyeghị na mara na e nwere ụfọdụ ihe a chọrọ na adabere na akụkụ anyị. Ị ga-achọkwa itinye ụfọdụ Javascript maka plugins anyị.

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

Site na ntọala ahụ, ị nwere ike ịmalite gbanwee mgbanwe Sass ọ bụla na maapụ gị custom.scss. Ị nwekwara ike ịmalite itinye akụkụ nke Bootstrap n'okpuru // Optionalngalaba dịka ọ dị mkpa. Anyị na-atụ aro ka iji nchịkọta mbubata zuru ezu sitere na bootstrap.scssfaịlụ anyị ka mmalite gị.

Ndabara dị iche iche

Sass ọ bụla na-agbanwe na Bootstrap na-agụnye !defaultọkọlọtọ na-enye gị ohere ịkwụsị uru ndabara nke mgbanwe na Sass nke gị na-enweghị gbanwee koodu isi mmalite Bootstrap. Detuo na mado mgbanwe dị ka achọrọ, gbanwee ụkpụrụ ha, wee wepụ !defaultọkọlọtọ. Ọ bụrụ na ekenyelarị mgbanwe, mgbe ahụ, ụkpụrụ ndabara agaghị ekenye ya ọzọ na Bootstrap.

Ị ga-ahụ ndepụta zuru oke nke mgbanwe Bootstrap na scss/_variables.scss. Adobere ụfọdụ mgbanwe na null, mgbanwe ndị a anaghị ewepụta ihe onwunwe ma ọ bụrụ na ewepụghị ha na nhazi gị.

Mgbanwe mgbanwe ga-abịarịrị mgbe ebubata ọrụ anyị, mana tupu mbubata ndị ọzọ.

Nke a bụ ọmụmaatụ na-agbanwe background-colorna colormaka <body>mgbe ị na-ebubata ma na-achịkọta Bootstrap site na 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

Tinyegharịa dịka ọ dị mkpa maka mgbanwe ọ bụla na Bootstrap, gụnyere nhọrọ zuru ụwa ọnụ n'okpuru.

Bido na Bootstrap site na npm site na iji ọrụ mmalite anyị! Gaba na twbs/bootstrap-npm-starter template repository ịhụ ka esi ewu na hazie Bootstrap n'ime ọrụ npm nke gị. Gụnyere Sass compiler, Autoprefixer, Stylelint, PurgeCSS, na Bootstrap Icons.

Maapụ na loops

Bootstrap gụnyere maapụ Sass ole na ole, isi uru ụzọ abụọ na-eme ka ọ dịrị mfe ịmepụta ezinụlọ CSS nwere njikọ. Anyị na-eji maapụ Sass maka agba anyị, ebe nkwụsịtụ grid na ndị ọzọ. Dịka mgbanwe Sass, maapụ Sass niile gụnyere !defaultọkọlọtọ ma enwere ike ịkagbu ya na ịgbatị.

Ụfọdụ maapụ Sass anyị jikọtara ọnụ na nke efu na ndabara. Emere nke a ka o kwe ka mgbasawanye nke maapụ Sass dị mfe, mana ọ na-abịa na ọnụ ahịa iji mee ka iwepụ ihe na maapụ sie ike karị.

Megharịa map

A kọwapụtara mgbanwe niile dị na $theme-colorsmaapụ dị ka mgbanwe kwụụrụ onwe ya. Ka ịgbanwee agba dị na $theme-colorsmaapụ anyị, tinye ihe ndị a na faịlụ Sass gị:

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

Ka emechara, edobere mgbanwe ndị a na $theme-colorsmaapụ Bootstrap:

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

Tinye na map

Tinye agba ọhụrụ na $theme-colors, ma ọ bụ maapụ ọ bụla ọzọ, site na ịmepụta maapụ Sass ọhụrụ yana ụkpụrụ omenala gị wee jikọta ya na maapụ mbụ. N'okwu a, anyị ga-emepụta $custom-colorsmaapụ ọhụrụ wee jikọta ya na $theme-colors.

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

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

Wepu na maapụ

Iji wepu agba na $theme-colors, ma ọ bụ maapụ ọ bụla ọzọ, jiri map-remove. Mara na ị ga-etinyerịrị $theme-colorsn'etiti ihe anyị chọrọ ka emechara nkọwa ya variablesna tupu ejiri ya na 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

Igodo achọrọ

Bootstrap na-eche na ọnụnọ ụfọdụ igodo dị n'ime maapụ Sass ka anyị na-eji wee gbasaa ndị a n'onwe anyị. Ka ị na-ahazi maapụ ndị agbakwunyere, ị nwere ike izute mperi ebe a na-eji igodo Sass akọwapụtara.

Dịka ọmụmaatụ, anyị na-eji igodo primary, success, na dangerigodo sitere na $theme-colorsnjikọ, bọtịnụ, na steeti ụdị. Dochie ụkpụrụ nke igodo ndị a ekwesịghị iwepụta nsogbu ọ bụla, mana iwepu ha nwere ike bute nsogbu mkpokọta Sass. N'ọnọdụ ndị a, ị ga-achọ ịgbanwe koodu Sass nke na-eji ụkpụrụ ndị ahụ.

Ọrụ

Agba

Na-esote maapụ Sass anyị nwere, agba isiokwu nwekwara ike iji dị ka mgbanwe kwụ ọtọ, dị ka $primary.

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

Ị nwere ike iji Bootstrap tint-color()na shade-color()ọrụ mee ka agba dị mfe ma ọ bụ gbaa ọchịchịrị. Ọrụ ndị a ga-agwakọta agba na oji ma ọ bụ ọcha, n'adịghị ka Sass 'nwa amaala lighten()na darken()ọrụ nke ga-agbanwe ìhè site na ego a kapịrị ọnụ, nke na-adịghị ebutekarị mmetụta achọrọ.

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

Na omume, ị ga-akpọ ọrụ ahụ wee gafere na agba na nha nha.

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

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

Agba dị iche

Iji zute ihe dị iche iche chọrọ ụkpụrụ nnweta ọdịnaya Weebụ (WCAG) , ndị ode akwụkwọ ga -enyerịrị ọdịiche agba ederede kacha nta nke 4.5: 1 yana obere ọdịiche agba na-abụghị nke ederede nke 3: 1 , ma ewezuga ihe ole na ole.

Iji nyere aka na nke a, anyị tinyere color-contrastọrụ na Bootstrap. Ọ na-eji WCAG iche ratio algọridim maka ịgbakọ ọnụ ụzọ dị iche dabere na ọkụ ọkụ dị na sRGBoghere agba iji weghachi ọkụ ozugbo ( #fff), ọchịchịrị ( #212529) ma ọ bụ ojii ( #000) agba ọdịiche dabere na agba agba akọwapụtara. Ọrụ a bara uru karịsịa maka mixins ma ọ bụ loops ebe ị na-emepụta ọtụtụ klaasị.

Dịka ọmụmaatụ, iji mepụta swatches agba na $theme-colorsmaapụ anyị:

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

Enwere ike iji ya maka mkpa iche iche nke otu oge:

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

Ị nwekwara ike ịkọwapụta agba isi na ọrụ maapụ agba anyị:

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

Wepụ SVG

Anyị na-eji escape-svgọrụ ahụ gbanarị <, >na #mkpụrụedemede maka onyonyo ndabere SVG. Mgbe ị na-eji escape-svgọrụ ahụ, a ga-ehotarịrị URI data.

Tinye na Wepụ ọrụ

Anyị na-eji addna subtractọrụ kechie ọrụ CSS calc. Ebumnuche bụ isi nke ọrụ ndị a bụ iji zere njehie mgbe 0uru "unitless" na-agafe na calcnkwupụta. Okwu dị ka calc(10px - 0)ga-eweghachi mperi na ihe nchọgharị niile, n'agbanyeghị na ọ bụ eziokwu na mgbakọ na mwepụ.

Ọmụmaatụ ebe calc dị irè:

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

Ọmụmaatụ ebe calc adịghị mma:

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

Ngwakọta

Akwụkwọ scss/mixins/ndekọ aha anyị nwere ọtụtụ mixins na-eme ka akụkụ nke Bootstrap nwee ike ma nwee ike iji ya gafee ọrụ nke gị.

Atụmatụ agba

Ngwakọta mkpirisi maka prefers-color-schemeajụjụ mgbasa ozi dị na nkwado maka light, dark, na atụmatụ agba agba.

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