Sass

Shandisa yedu sosi mafaera eSass kutora mukana wekusiyana, mepu, musanganiswa, uye mabasa kukubatsira iwe kuvaka nekukurumidza uye kugadzirisa purojekiti yako.

Pa peji ino

Shandisa yedu sosi mafaera eSass kutora mukana wekusiyana, mepu, musanganiswa, nezvimwe.

Chimiro chefaira

Pese pazvinogoneka, dzivirira kugadzirisa mafaira eBootstrap. Kune Sass, zvinoreva kugadzira yako wega stylesheet inopinza Bootstrap kuti ugone kuigadzirisa nekuiwedzera. Kufungidzira kuti uri kushandisa pasuru maneja senge npm, iwe unenge uine faira chimiro chinotaridzika seizvi:

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

Kana iwe wakadhawunirodha yedu kwaunobva mafaera uye usiri kushandisa pasuru maneja, iwe unenge uchida kugadzira nemaoko chimwe chinhu chakafanana neiyo chimiro, uchichengeta Bootstrap's sosi mafaera akasiyana kubva kune ako.

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

Importing

Mune yako custom.scss, iwe unopinza Bootstrap's source Sass mafaera. Iwe une mbiri sarudzo: sanganisira ese eBootstrap, kana tora zvikamu zvaunoda. Tinokurudzira vekupedzisira, asi ziva kuti pane zvimwe zvinodiwa uye zvinotsamira pazvikamu zvedu. Iwe zvakare unozofanirwa kusanganisira imwe JavaScript yemapulagi edu.

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

Nekuseta ikoko munzvimbo, unogona kutanga kugadzirisa chero maSass akasiyana uye mepu mune yako custom.scss. Iwe unogona zvakare kutanga kuwedzera zvikamu zveBootstrap pasi // Optionalpechikamu sezvinodiwa. Isu tinopa zano kushandisa iyo yakazara yekupinza stack kubva bootstrap.scsskufaira redu senzvimbo yako yekutanga.

Variable defaults

Yese Sass inosiyana muBootstrap inosanganisira iyo !defaultmureza inokubvumidza kuti uwedzere kukosha kwekusiyana kweiyo Sass yako pasina kugadzirisa Bootstrap's source code. Kopa uye unamate zvinosiyana sezvinodiwa, shandura maitiro avo, uye bvisa !defaultmureza. Kana shanduko yakatopihwa, saka haizopihwazve neiyo default tsika muBootstrap.

Iwe uchawana iyo yakazara runyorwa rweBootstrap's akasiyana mu scss/_variables.scss. Mamwe mavhezheni akaiswa ku null, aya akasiyana haabudise chivakwa kunze kwekunge akadarika mukumisikidzwa kwako.

Kuwedzeredza kwakasiyana kunofanirwa kuuya mushure mekunge mabasa edu atengeswa kunze kwenyika, asi pamberi pezvimwe zvekunze.

Heino muenzaniso unoshandura iyo background-coloruye coloryeiyo <body>kana uchipinza uye kunyora Bootstrap kuburikidza 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

Dzokorora sezvinodiwa kune chero shanduko muBootstrap, kusanganisira sarudzo dzepasirese pazasi.

Tanga neBootstrap kuburikidza nenpm neyekutanga chirongwa chedu! Musoro kune twbs/bootstrap-npm-starter template repository kuti uone maitiro ekuvaka uye kugadzirisa Bootstrap mune yako wega npm purojekiti. Inosanganisira Sass compiler, Autoprefixer, Stylelint, PurgeCSS, uye Bootstrap Icons.

Mepu uye zvishwe

Bootstrap inosanganisira mashoma emamepu eSass, akakosha mapeya anoita kuti zvive nyore kugadzira mhuri dzeCSS dzine hukama. Isu tinoshandisa mamepu eSass kune edu mavara, grid breakpoints, nezvimwe. Sezvakangoita maSass akasiyana, ese maSass mepu anosanganisira !defaultmureza uye anogona kudhindwa nekuwedzerwa.

Mamwe emamepu edu eSass anobatanidzwa kuita asina chinhu nekukasira. Izvi zvinoitirwa kubvumira kuwedzera kuri nyore kwemepu yeSass yakapihwa, asi zvinouya nemubhadharo wekugadzira kubvisa zvinhu kubva pamepu kuoma zvishoma.

Shandura mepu

Zvese zvakasiyana $theme-colorspamepu zvinotsanangurwa sezvimiro zvakamira. Kuti ugadzirise ruvara rwuripo $theme-colorspamepu yedu, wedzera zvinotevera kune yako tsika Sass faira:

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

Gare gare, aya akasiyana akaiswa muBootstrap's $theme-colorsmepu:

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

Wedzera kumepu

Wedzera mavara matsva ku $theme-colors, kana chero imwe mepu, nekugadzira mepu itsva yeSass ine tsika dzako tsika uye kuisanganisa nemepu yekutanga. Pakadai, tichagadzira $custom-colorsmepu itsva toisanganisa ne $theme-colors.

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

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

Bvisa kubva pamepu

Kubvisa mavara kubva $theme-colors, kana chero imwe mepu, shandisa map-remove. Ziva kuti unofanirwa kuisa $theme-colorspakati pezvatinoda mushure mekutsanangurwa kwayo mukati variablesuye isati yashandiswa mu 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

Makiyi anodiwa

Bootstrap inotora kuvapo kwemamwe makiyi mukati meSass mepu sezvataishandisa uye kuwedzera iwo pachedu. Sezvo iwe uchigadzirisa mamepu anosanganisirwa, unogona kusangana nezvikanganiso apo chaiyo Sass mepu kiyi iri kushandiswa.

Semuenzaniso, isu tinoshandisa iyo primary, success, uye dangermakiyi kubva $theme-colorskune zvinongedzo, mabhatani, uye fomu nyika. Kutsiva kukosha kwemakiyi aya hakufanire kuratidza nyaya, asi kubvisa kunogona kukonzera Sass kuunganidza nyaya. Muzviitiko izvi, iwe unozofanirwa kugadzirisa iyo Sass kodhi inoshandisa iwo maitiro.

Mabasa

Colors

Padivi pemamepu eSass atinawo, mavara edingindira anogonawo kushandiswa seakamira akasarudzika, senge $primary.

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

Iwe unogona kujekesa kana kusviba mavara neBootstrap tint-color()uye shade-color()mabasa. Aya mabasa achasanganisa mavara neatema kana chena, kusiyana nekwaSass 'yekuzvarwa lighten()uye darken()mabasa ayo anozoshandura kureruka nehuwandu hwakatarwa, izvo kazhinji hazvitungamiri kune inodiwa mhedzisiro.

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

Mukuita, iwe waizodaidza basa racho uye wopfuudza muvara uye uremu paramita.

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

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

Kusiyana kwemavara

Kuti zvizadzise zvinodiwa neWebhu Content Accessibility Guidelines (WCAG) , vanyori vanofanira kupa musiyano wemavara emavara mashoma we4.5:1 uye musiyano weruvara usiri wemavara unosvika 3:1 , uchisiya zvishoma.

Kuti tibatsire neizvi, takabatanidza color-contrastbasa muBootstrap. Inoshandisa iyo WCAG musiyano wechiyero algorithm kuverengera mutsauko wepakati zvichienderana nekupenya kunoenderana munzvimbo yeruvara kuti idzorere otomatikisRGB mwenje ( #fff), dema ( #212529) kana dema ( #000) mutsauko weruvara zvichienderana neyakatsanangurwa base color. Iri basa rinonyanya kubatsira kumamikisi kana zvishwe pauri kugadzira akawanda makirasi.

Semuenzaniso, kugadzira mavara emavara kubva $theme-colorspamepu yedu:

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

Inogona zvakare kushandiswa kune imwe-off mutsauko zvinodiwa:

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

Iwe unogona zvakare kutsanangura ruvara rwepasi nemepu yedu yemavara mabasa:

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

Escape SVG

Isu tinoshandisa escape-svgbasa kutiza iyo <, >uye #mavara eSVG kumashure mifananidzo. Paunenge uchishandisa escape-svgbasa, data URIs inofanirwa kutorwa.

Wedzera uye Bvisa mabasa

Isu tinoshandisa iyo adduye subtractmabasa kuputira iyo CSS calcbasa. Chinangwa chikuru chemabasa aya ndechekudzivirira kukanganisa kana 0kukosha kwe "unitless" kuchiiswa muchirevo calc. Matauriro akadai calc(10px - 0)anodzosa chikanganiso mumabhurawuza ese, kunyangwe ari masvomhu chaiwo.

Muenzaniso apo calc inoshanda:

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

Muenzaniso apo calc isiri kushanda:

$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

Dhairekitori redu scss/mixins/rine matani emusanganiswa ayo ane simba zvikamu zveBootstrap uye anogona zvakare kushandiswa pane yako wega purojekiti.

Zvirongwa zvemavara

A shorthand mixin prefers-color-schemeyemubvunzo wemedia inowanikwa nerutsigiro rwe light,, darkuye tsika yemavara zvirongwa.

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