Sass
Cleachd na faidhlichean Sass stòr againn gus brath a ghabhail air caochladairean, mapaichean, measgachadh, agus gnìomhan gus do chuideachadh le bhith a’ togail nas luaithe agus a’ gnàthachadh do phròiseact.
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 chuir air dòigh 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";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";
// 4. Include any optional Bootstrap CSS 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";
// 5. Optionally include utilities API last to generate classes based on the Sass map in `_utilities.scss`
@import "../node_modules/bootstrap/scss/utilities/api";
// 6. 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/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 a chuir a-steach eadar na riatanasan agus na roghainnean againn:
// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";
$theme-colors: map-remove($theme-colors, "info", "light", "dark");
// 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 inbhean ruigsinneachd WCAG 2.0 airson iomsgaradh dhathan , feumaidh ùghdaran co-mheas eadar-dhealaichte de 4.5:1 co-dhiù a thoirt seachad , le glè bheag de dh’ eisgeachdan.
Is e gnìomh a bharrachd a tha sinn a’ toirt a-steach ann am Bootstrap an gnìomh eadar-dhealachadh dath, color-contrast. Bidh e a’ cleachdadh an algairim WCAG 2.0 airson stairsnich iomsgaradh obrachadh a-mach stèidhichte air soilleireachd coimeasach ann an àite dath gus dath eadar-dhealaichte aotrom ( ), dorcha ( ) no dubh ( ) sRGBa 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.#fff#212529#000
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
}
}