Sass
Lo awọn faili Sass orisun wa lati lo anfani ti awọn oniyipada, maapu, awọn apopọ, ati awọn iṣẹ lati ṣe iranlọwọ fun ọ lati kọ yiyara ati ṣe akanṣe iṣẹ akanṣe rẹ.
Lo awọn faili Sass orisun wa lati lo anfani awọn oniyipada, maapu, awọn apopọ, ati diẹ sii.
Ilana faili
Nigbakugba ti o ba ṣeeṣe, yago fun iyipada awọn faili pataki Bootstrap. Fun Sass, iyẹn tumọ si ṣiṣẹda iwe aṣa tirẹ ti o gbe Bootstrap wọle ki o le yipada ki o fa sii. Ti o ba ro pe o nlo oluṣakoso package bi npm, iwọ yoo ni eto faili ti o dabi eyi:
your-project/
├── scss
│ └── custom.scss
└── node_modules/
└── bootstrap
├── js
└── scss
Ti o ba ti ṣe igbasilẹ awọn faili orisun wa ati pe ko lo oluṣakoso package, iwọ yoo fẹ lati ṣẹda pẹlu ọwọ nkan ti o jọra si eto yẹn, titọju awọn faili orisun Bootstrap lọtọ si tirẹ.
your-project/
├── scss
│ └── custom.scss
└── bootstrap/
├── js
└── scss
Gbigbe wọle
Ninu rẹ custom.scss, iwọ yoo gbe awọn faili Sass orisun Bootstrap wọle. O ni awọn aṣayan meji: pẹlu gbogbo Bootstrap, tabi mu awọn ẹya ti o nilo. A ṣe iwuri fun igbehin, botilẹjẹpe akiyesi pe awọn ibeere ati awọn igbẹkẹle wa kọja awọn paati wa. Iwọ yoo tun nilo lati ni diẹ ninu JavaScript fun awọn afikun wa.
// 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
Pẹlu iṣeto yẹn ni aye, o le bẹrẹ lati yipada eyikeyi ninu awọn oniyipada Sass ati awọn maapu ninu faili custom.scss. O tun le bẹrẹ lati ṣafikun awọn ẹya Bootstrap labẹ // Optionalapakan bi o ṣe nilo. A daba ni lilo akopọ agbewọle ni kikun lati bootstrap.scssfaili wa bi aaye ibẹrẹ rẹ.
Ayipada aiyipada
Gbogbo oniyipada Sass ni Bootstrap pẹlu !defaultasia ti o fun ọ laaye lati yiyipada iye aiyipada ti oniyipada ninu Sass tirẹ laisi iyipada koodu orisun Bootstrap. Daakọ ati lẹẹmọ awọn oniyipada bi o ṣe nilo, yi awọn iye wọn pada, ki o yọ !defaultasia kuro. Ti o ba ti yan oniyipada kan tẹlẹ, lẹhinna kii yoo tun fi sọtọ nipasẹ awọn iye aiyipada ni Bootstrap.
Iwọ yoo wa atokọ pipe ti awọn oniyipada Bootstrap ni scss/_variables.scss. Diẹ ninu awọn oniyipada ti ṣeto si null, awọn oniyipada wọnyi ko jade ohun-ini ayafi ti wọn ba bori ninu iṣeto rẹ.
Ayipada iyipada gbọdọ wa lẹhin ti awọn iṣẹ wa ti gbe wọle, ṣugbọn ṣaaju awọn agbewọle to ku.
Eyi ni apẹẹrẹ ti o yipada background-colorati colorfun <body>nigba gbigbe wọle ati ṣajọ Bootstrap nipasẹ 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
Tun ṣe pataki fun eyikeyi oniyipada ni Bootstrap, pẹlu awọn aṣayan agbaye ni isalẹ.
Awọn maapu ati awọn losiwajulosehin
Bootstrap pẹlu iwonba awọn maapu Sass, awọn orisii iye bọtini ti o jẹ ki o rọrun lati ṣe ipilẹṣẹ awọn idile ti CSS ti o ni ibatan. A lo awọn maapu Sass fun awọn awọ wa, awọn aaye fifọ grid, ati diẹ sii. Gẹgẹ bii awọn oniyipada Sass, gbogbo awọn maapu Sass pẹlu !defaultasia ati pe o le bori ati faagun.
Diẹ ninu awọn maapu Sass wa ti dapọ si awọn ti o ṣofo nipasẹ aiyipada. Eyi ni a ṣe lati gba imugboroja irọrun ti maapu Sass ti a fun, ṣugbọn o wa ni idiyele ti ṣiṣe yiyọ awọn ohun kan kuro lati maapu kan ni iṣoro diẹ sii.
Ṣe atunṣe maapu
Gbogbo awọn oniyipada ninu $theme-colorsmaapu naa jẹ asọye bi awọn oniyipada adaduro. Lati ṣatunkọ awọ to wa tẹlẹ ninu $theme-colorsmaapu wa, ṣafikun atẹle naa si faili Sass aṣa rẹ:
$primary: #0074d9;
$danger: #ff4136;
Nigbamii lori, awọn oniyipada wọnyi ti ṣeto ni $theme-colorsmaapu Bootstrap:
$theme-colors: (
"primary": $primary,
"danger": $danger
);
Fi kun si maapu
Ṣafikun awọn awọ tuntun si $theme-colors, tabi eyikeyi maapu miiran, nipa ṣiṣẹda maapu Sass tuntun pẹlu awọn iye aṣa rẹ ati dapọ pẹlu maapu atilẹba. Ni idi eyi, a yoo ṣẹda $custom-colorsmaapu tuntun kan ao si dapọ mọ $theme-colors.
// Create your own map
$custom-colors: (
"custom-color": #900
);
// Merge the maps
$theme-colors: map-merge($theme-colors, $custom-colors);
Yọọ kuro ni maapu
Lati yọ awọn awọ kuro lati $theme-colors, tabi eyikeyi maapu miiran, lo map-remove. Ṣọra o gbọdọ fi sii $theme-colorslaarin awọn ibeere wa ni kete lẹhin itumọ rẹ ninu variablesati ṣaaju lilo rẹ ni 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
Awọn bọtini ti a beere
Bootstrap dawọle wiwa diẹ ninu awọn bọtini kan pato laarin awọn maapu Sass bi a ṣe lo ati fa awọn wọnyi funrara wa. Bi o ṣe n ṣatunṣe awọn maapu to wa, o le ba pade awọn aṣiṣe nibiti o ti nlo bọtini maapu Sass kan pato.
Fun apẹẹrẹ, a lo primary, success, ati dangerawọn bọtini lati $theme-colorsfun awọn ọna asopọ, awọn bọtini, ati awọn ipinlẹ fọọmu. Rirọpo awọn iye ti awọn bọtini wọnyi ko yẹ ki o ṣafihan awọn ọran kankan, ṣugbọn yiyọ wọn le fa awọn ọran akojọpọ Sass. Ni awọn iṣẹlẹ wọnyi, iwọ yoo nilo lati yipada koodu Sass ti o lo awọn iye wọnyẹn.
Awọn iṣẹ
Awọn awọ
Lẹgbẹẹ awọn maapu Sass ti a ni, awọn awọ akori tun le ṣee lo bi awọn oniyipada adaduro, bii $primary.
.custom-element {
color: $gray-100;
background-color: $dark;
}
O le tan tabi ṣokunkun awọn awọ pẹlu Bootstrap's tint-color()ati shade-color()awọn iṣẹ. Awọn iṣẹ wọnyi yoo dapọ awọn awọ pẹlu dudu tabi funfun, ko dabi abinibi Sass lighten()ati darken()awọn iṣẹ eyiti yoo yi ina pada nipasẹ iye ti o wa titi, eyiti nigbagbogbo ko yorisi ipa ti o fẹ.
// 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));
}
Ni iṣe, iwọ yoo pe iṣẹ naa ki o kọja ni awọ ati awọn aye iwuwo.
.custom-element {
color: tint-color($primary, 10%);
}
.custom-element-2 {
color: shade-color($danger, 30%);
}
Iyatọ awọ
Lati le pade Awọn ilana Itọnisọna Wiwọle Akoonu wẹẹbu (WCAG) awọn ibeere itansan, awọn onkọwe gbọdọ pese iyatọ awọ ọrọ ti o kere ju ti 4.5: 1 ati iyatọ awọ ti kii-ọrọ ti o kere ju ti 3: 1 , pẹlu awọn imukuro pupọ diẹ.
Lati ṣe iranlọwọ pẹlu eyi, a ṣafikun color-contrastiṣẹ naa ni Bootstrap. O nlo algorithm ipin itansan WCAG fun ṣiṣe iṣiro awọn iloro itansan ti o da lori itanna ibatan ni aaye sRGBawọ lati da ina kan pada laifọwọyi ( #fff), dudu ( #212529) tabi dudu ( #000) awọ itansan ti o da lori awọ ipilẹ ti a sọ pato. Iṣẹ yii wulo paapaa fun awọn apopọ tabi awọn losiwajulosehin nibiti o ti n ṣe agbekalẹ awọn kilasi pupọ.
Fun apẹẹrẹ, lati ṣe agbejade awọn swatches awọ lati $theme-colorsmaapu wa:
@each $color, $value in $theme-colors {
.swatch-#{$color} {
color: color-contrast($value);
}
}
O tun le ṣee lo fun awọn iwulo itansan ọkan-pipa:
.custom-element {
color: color-contrast(#000); // returns `color: #fff`
}
O tun le pato awọ ipilẹ kan pẹlu awọn iṣẹ maapu awọ wa:
.custom-element {
color: color-contrast($dark); // returns `color: #fff`
}
Sa SVG
A lo escape-svgiṣẹ naa lati sa fun <, >ati #awọn kikọ fun awọn aworan abẹlẹ SVG. Nigbati o ba nlo escape-svgiṣẹ naa, awọn URI data gbọdọ jẹ agbasọ.
Fikun-un ati Yọ awọn iṣẹ kuro
A lo addati awọn subtractiṣẹ lati fi ipari si iṣẹ CSS calc. Idi akọkọ ti awọn iṣẹ wọnyi ni lati yago fun awọn aṣiṣe nigbati iye “unitless” 0ti kọja sinu calcikosile kan. Awọn ikosile bii calc(10px - 0)yoo da aṣiṣe pada ni gbogbo awọn aṣawakiri, botilẹjẹpe o jẹ deede ni mathematiki.
Apẹẹrẹ nibiti calc ti wulo:
$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);
}
Apẹẹrẹ nibiti calc ko wulo:
$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
Itọsọna wa scss/mixins/ni pupọ ti awọn apopọ ti o ni agbara awọn ẹya Bootstrap ati pe o tun le ṣee lo kọja iṣẹ akanṣe tirẹ.
Awọn eto awọ
Apapọ ọwọ kukuru fun prefers-color-schemeibeere media wa pẹlu atilẹyin fun light, dark, ati awọn ero awọ aṣa.
@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
}
}