Sass

Cleachd na faidhlichean Sass stòr againn gus brath a ghabhail air caochladairean, mapaichean, measgachadh agus barrachd.

Structar faidhle

Far an gabh sin dèanamh, seachain prìomh fhaidhlichean Bootstrap atharrachadh. Airson Sass, tha sin a’ ciallachadh a bhith a’ cruthachadh do dhuilleag stoidhle fhèin a bheir a-steach Bootstrap gus an urrainn dhut atharrachadh agus a leudachadh. A’ gabhail ris gu bheil thu a’ cleachdadh manaidsear pacaid mar npm, bidh structar faidhle agad a tha coltach ri seo:

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

Ma tha thu air na faidhlichean stòr againn a luchdachadh sìos agus nach eil thu a’ cleachdadh manaidsear pacaid, bidh thu airson rudeigin coltach ris an structar sin a chruthachadh le làimh, a’ cumail faidhlichean stòr Bootstrap air leth bhon fheadhainn agad fhèin.

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

A’ toirt a-steach

Anns an custom.scss, bheir thu a-steach faidhlichean Sass stòr Bootstrap. Tha dà roghainn agad: cuir a-steach Bootstrap gu lèir, no tagh na pàirtean a tha a dhìth ort. Bidh sinn a’ brosnachadh an fheadhainn mu dheireadh, ged a bhith mothachail gu bheil cuid de riatanasan agus eisimeileachd thar ar pàirtean. Feumaidh tu cuideachd beagan JavaScript a chuir a-steach airson na plugins againn.

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

Leis an stèidheachadh sin na àite, faodaidh tu tòiseachadh air atharrachadh sam bith de na caochladairean agus mapaichean Sass anns an fhaidhle custom.scss. Faodaidh tu cuideachd tòiseachadh air pàirtean de Bootstrap a chuir ris fon // Optionalroinn mar a dh ’fheumar. Tha sinn a’ moladh a bhith a’ cleachdadh an làn stac in-mhalairt bhon bootstrap.scssfhaidhle againn mar thoiseach tòiseachaidh dhut.

Roghainnean bunaiteach caochlaideach

Tha a h-uile caochladair Sass ann am Bootstrap a’ toirt a-steach a’ !defaultbhratach a leigeas leat faighinn thairis air luach bunaiteach an caochladair anns an Sass agad fhèin gun a bhith ag atharrachadh còd stòr Bootstrap. Dèan lethbhreac agus pasg air caochladairean mar a dh ’fheumar, atharraich na luachan aca, agus thoir air falbh a’ !defaultbhratach. Ma chaidh caochladair a shònrachadh mar-thà, cha bhith e air ath-shònrachadh leis na luachan bunaiteach ann am Bootstrap.

Lorgaidh tu an liosta iomlan de chaochladairean Bootstrap ann an scss/_variables.scss. Tha cuid de chaochladairean air an suidheachadh gu null, cha bhith na caochladairean sin a’ toirt a-mach an togalach mura tèid an toirt thairis anns an rèiteachadh agad.

Feumaidh tar-chuir caochlaideach tighinn às deidh ar gnìomhan a bhith air an toirt a-steach, ach ron chòrr de in-mhalairt.

Seo eisimpleir a dh’ atharraicheas an background-coloragus colorairson <body>nuair a thathar a’ toirt a-steach agus a’ cur ri chèile Bootstrap tro 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

Dèan ath-aithris mar a dh’ fheumar airson caochladair sam bith ann am Bootstrap, a’ toirt a-steach na roghainnean cruinneil gu h-ìosal.

Mapaichean agus lùban

Tha Bootstrap a’ toirt a-steach dòrlach de mhapaichean Sass, prìomh chàraidean luach a tha ga dhèanamh nas fhasa teaghlaichean de CSS co-cheangailte a ghineadh. Bidh sinn a’ cleachdadh mapaichean Sass airson ar dathan, puingean brisidh clèithe, agus barrachd. Dìreach mar caochladairean Sass, tha a h-uile mapa Sass a’ toirt a-steach a’ !defaultbhratach agus faodar an toirt thairis agus a leudachadh.

Tha cuid de na mapaichean Sass againn air an cur còmhla ri feadhainn falamh gu bunaiteach. Tha seo air a dhèanamh gus leudachadh furasta a dhèanamh air mapa Sass sònraichte, ach thig e aig cosgais a bhith a’ toirt air falbh nithean bho mhapa beagan nas duilghe.

Atharraich mapa

Tha na caochladairean uile air a’ $theme-colorsmhapa air am mìneachadh mar chaochladairean fa leth. Gus dath a th’ air a’ $theme-colorsmhapa againn atharrachadh, cuir na leanas ris an fhaidhle àbhaisteach Sass agad:

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

Nas fhaide air adhart, tha na caochladairean sin air an suidheachadh ann am $theme-colorsmapa Bootstrap:

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

Cuir ris a’ mhapa

Cuir dathan ùra ri $theme-colors, no mapa sam bith eile, le bhith a’ cruthachadh mapa Sass ùr leis na luachan àbhaisteach agad agus ga chur còmhla ris a’ mhapa thùsail. Anns a 'chùis seo, cruthaichidh sinn $custom-colorsmapa ùr agus cuiridh sinn còmhla e le $theme-colors.

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

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

Thoir air falbh bhon mhapa

Gus dathan a thoirt air falbh bho $theme-colors, no mapa sam bith eile, cleachd map-remove. Bi mothachail gum feum thu cuir a-steach $theme-colorseadar na riatanasan againn dìreach às deidh a mhìneachadh ann an variablesagus mus tèid a chleachdadh ann an 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

Iuchraichean riatanach

Tha Bootstrap a’ gabhail ris gu bheil iuchraichean sònraichte an làthair taobh a-staigh mhapaichean Sass mar a chleachd sinn agus leudaich sinn iad sin. Mar a bhios tu a’ gnàthachadh nam mapaichean a tha air an toirt a-steach, is dòcha gun tig thu tarsainn air mearachdan far a bheil iuchair mapa Sass sònraichte ga chleachdadh.

Mar eisimpleir, bidh sinn a’ cleachdadh na primary, success, agus dangeriuchraichean bho $theme-colorsairson ceanglaichean, putanan, agus stàitean foirm. Cha bu chòir duilgheadasan sam bith a bhith ann le bhith a’ cur an àite luachan nan iuchraichean sin, ach dh’ fhaodadh gun toireadh e cùisean co-chruinneachadh Sass air falbh. Anns na suidheachaidhean sin, feumaidh tu an còd Sass atharrachadh a chleachdas na luachan sin.

Gnìomhan

Dathan

Ri taobh nam mapaichean Sass a th’ againn, faodar dathan cuspair a chleachdadh cuideachd mar chaochladairean leotha fhèin, leithid $primary.

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

Faodaidh tu dathan a lasadh no a dhorchachadh le Bootstrap tint-color()agus shade-color()gnìomhan. Bidh na gnìomhan sin a’ measgachadh dhathan le dubh no geal, eu-coltach ri Sass dùthchasach lighten()agus darken()gnìomhan a dh’ atharraicheas an solas le tomhas stèidhichte, nach bi gu tric a’ leantainn gu a’ bhuaidh a thathar ag iarraidh.

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

Ann an cleachdadh, chanadh tu an gnìomh agus bheireadh tu seachad na crìochan dath is cuideam.

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

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

Coltas dath

Gus coinneachadh ri riatanasan iomsgaradh Stiùireadh Ruigsinneachd Susbaint Lìn (WCAG) , feumaidh ùghdaran eadar-dhealachadh dath teacsa as ìsle de 4.5: 1 agus eadar-dhealachadh dath neo-theacsa de 3: 1 a thoirt seachad , le glè bheag de dh’ eisgeachdan.

Gus cuideachadh le seo, thug sinn a-steach an color-contrastgnìomh ann am Bootstrap. Bidh e a’ cleachdadh algairim co-mheas eadar-dhealaichte WCAG airson a bhith a’ tomhas stairsnich iomsgaradh stèidhichte air soilleireachd coimeasach ann an sRGBàite dath gus dath eadar-dhealaichte aotrom ( #fff), dorcha ( #212529) no dubh ( #000) a thilleadh gu fèin-ghluasadach stèidhichte air an dath bunaiteach ainmichte. Tha an gnìomh seo gu sònraichte feumail airson measgachadh no lùban far a bheil thu a’ gineadh grunn chlasaichean.

Mar eisimpleir, gus swatches dath a ghineadh bhon $theme-colorsmhapa againn:

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

Faodar a chleachdadh cuideachd airson feumalachdan eadar-dhealaichte aon-uair:

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

Faodaidh tu cuideachd dath bunaiteach a shònrachadh leis na gnìomhan mapa dath againn:

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

Teicheadh ​​SVG

Bidh sinn a’ cleachdadh a’ escape-svgghnìomh gus faighinn seachad air an <, >agus na #caractaran airson ìomhaighean cùl-raoin SVG. Nuair a bhios tu a’ cleachdadh a’ escape-svgghnìomh, feumar URIan dàta a luaidh.

Gnìomhan cuir-ris is thoir air falbh

Bidh sinn a’ cleachdadh na addagus na subtractgnìomhan gus am feart CSS a phasgadh calc. 0Is e prìomh adhbhar nan gnìomhan sin mearachdan a sheachnadh nuair a thèid luach “gun aonad” a thoirt a-steach do calcabairt. calc(10px - 0)Tillidh abairtean mar seo mearachd anns a h-uile brobhsair, a dh’ aindeoin a bhith ceart gu matamataigeach.

Eisimpleir far a bheil an calc dligheach:

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

Eisimpleir far a bheil an calc neo-dhligheach:

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

Measgachadh

Tha tunna de mheasgachaidhean anns an eòlaire againn scss/mixins/a bheir cumhachd do phàirtean de Bootstrap agus faodar an cleachdadh thairis air a’ phròiseact agad fhèin cuideachd.

Sgeama dathan

Tha measgachadh làmh-ghoirid airson prefers-color-schemeceist nam meadhanan ri fhaighinn le taic airson light, dark, agus sgeamaichean dath àbhaisteach.

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