Sass
Yi amfani da fayilolin Sass tushen mu don cin gajiyar sauye-sauye, taswirori, mahaɗa, da ayyuka don taimaka muku haɓaka sauri da tsara aikinku.
Yi amfani da fayilolin Sass tushen mu don amfani da fa'idar masu canji, taswirori, mixins, da ƙari.
Tsarin fayil
A duk lokacin da zai yiwu, guje wa gyara manyan fayilolin Bootstrap. Don Sass, wannan yana nufin ƙirƙirar takaddun salon ku wanda ke shigo da Bootstrap don ku iya gyarawa da tsawaita shi. Tsammanin kuna amfani da mai sarrafa fakiti kamar npm, zaku sami tsarin fayil mai kama da wannan:
your-project/
├── scss
│ └── custom.scss
└── node_modules/
└── bootstrap
├── js
└── scss
Idan kun zazzage fayilolin tushen mu kuma ba ku amfani da mai sarrafa fakiti, kuna son saita wani abu mai kama da wannan tsarin da hannu, kiyaye fayilolin tushen Bootstrap daban da naku.
your-project/
├── scss
│ └── custom.scss
└── bootstrap/
├── js
└── scss
Ana shigo da shi
A cikin custom.scss, za ku shigo da fayilolin Sass tushen Bootstrap. Kuna da zaɓuɓɓuka biyu: haɗa duk Bootstrap, ko zaɓi sassan da kuke buƙata. Muna ƙarfafa na ƙarshe, ko da yake ku sani akwai wasu buƙatu da abin dogaro a cikin abubuwan da muka haɗa. Hakanan kuna buƙatar haɗa wasu JavaScript don plugins ɗin mu.
// 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
Tare da wannan saitin a wurin, zaku iya fara canza kowane Sass masu canji da taswira a cikin custom.scss. Hakanan zaka iya fara ƙara sassan Bootstrap a ƙarƙashin // Optionalsashin kamar yadda ake buƙata. Muna ba da shawarar amfani da cikakken tarin shigo da kaya daga bootstrap.scssfayil ɗin mu azaman wurin farawa.
Matsaloli masu canzawa
Kowane Sass m a cikin Bootstrap ya haɗa da !defaulttutar da ke ba ka damar ƙetare ƙimar tsohowar mai canjin a cikin Sass ɗin ku ba tare da canza lambar tushe ta Bootstrap ba. Kwafi da liƙa masu canji kamar yadda ake buƙata, gyara ƙimar su, sannan cire !defaulttuta. Idan an riga an sanya maɓalli, to ba za a sake sanya shi ta tsohowar dabi'u a Bootstrap ba.
Za ku sami cikakken jerin masu canji na Bootstrap a cikin scss/_variables.scss. An saita wasu masu canji zuwa null, waɗannan masu canji ba sa fitar da kayan sai dai idan an soke su a cikin tsarin ku.
Dole ne canje-canje masu canzawa su zo bayan an shigo da ayyukanmu, amma kafin sauran abubuwan shigo da su.
Anan ga misalin da ke canza da background-colorkuma colorlokacin <body>sayo da haɗa Bootstrap ta 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
Maimaita kamar yadda ya cancanta ga kowane mai canzawa a cikin Bootstrap, gami da zaɓuɓɓukan duniya da ke ƙasa.
Taswirori da madaukai
Bootstrap ya ƙunshi ɗimbin taswirorin Sass, maɓalli masu ƙima waɗanda ke sauƙaƙa samar da iyalai na CSS masu alaƙa. Muna amfani da taswirorin Sass don launukanmu, wuraren karyewar grid, da ƙari. Kamar masu canji na Sass, duk taswirorin Sass sun haɗa da !defaulttuta kuma ana iya ƙetare su da tsawaita.
Wasu taswirorin mu na Sass an haɗa su zuwa marasa komai ta tsohuwa. Ana yin wannan don ba da damar fadada taswirar Sass da aka bayar cikin sauƙi, amma ya zo da tsadar cire abubuwa daga taswira da ɗan wahala.
Gyara taswira
Dukkan masu canji a $theme-colorstaswirar an bayyana su azaman masu canji na tsaye. Don canza launin da ke cikin $theme-colorstaswirar mu, ƙara mai zuwa zuwa fayil ɗin Sass na al'ada:
$primary: #0074d9;
$danger: #ff4136;
Daga baya, an saita waɗannan masu canji a $theme-colorstaswirar Bootstrap:
$theme-colors: (
"primary": $primary,
"danger": $danger
);
Ƙara zuwa taswira
Ƙara sababbin launuka zuwa $theme-colors, ko kowane taswira, ta hanyar ƙirƙirar sabon taswirar Sass tare da dabi'unku na al'ada da kuma haɗa shi da taswirar asali. A wannan yanayin, za mu ƙirƙiri sabuwar $custom-colorstaswira kuma mu haɗa ta da $theme-colors.
// Create your own map
$custom-colors: (
"custom-color": #900
);
// Merge the maps
$theme-colors: map-merge($theme-colors, $custom-colors);
Cire daga taswira
Don cire launuka daga $theme-colors, ko kowane taswira, yi amfani da map-remove. Ku sani dole ne ku saka shi tsakanin buƙatunmu da zaɓuɓɓukanmu:
// 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
Maɓallan da ake buƙata
Bootstrap yana ɗaukar kasancewar wasu takamaiman maɓalli a cikin taswirar Sass kamar yadda muka yi amfani da su kuma muka faɗaɗa waɗannan kanmu. Yayin da kuke keɓance taswirorin da aka haɗa, zaku iya fuskantar kurakurai inda ake amfani da takamaiman taswirar taswirar Sass.
Misali, muna amfani da primary, success, da dangermaɓallai daga $theme-colorsdon hanyoyin haɗin gwiwa, maɓallai, da jihohin tsari. Sauya kimar waɗannan maɓallan bai kamata ya gabatar da wata matsala ba, amma cire su na iya haifar da al'amuran haɗar Sass. A cikin waɗannan lokuta, kuna buƙatar canza lambar Sass wanda ke amfani da waɗannan ƙimar.
Ayyuka
Launuka
Kusa da taswirorin Sass da muke da su, launukan jigo kuma ana iya amfani da su azaman masu canji na tsaye, kamar $primary.
.custom-element {
color: $gray-100;
background-color: $dark;
}
Kuna iya haskaka ko duhu launuka tare da Bootstrap's tint-color()da shade-color()ayyuka. Waɗannan ayyuka za su haɗu da launuka tare da baki ko fari, sabanin Sass 'yan asalin lighten()da darken()ayyuka waɗanda za su canza haske ta ƙayyadaddun adadin, wanda sau da yawa baya haifar da tasirin da ake so.
// 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));
}
A aikace, zaku kira aikin kuma ku wuce cikin sigogin launi da nauyi.
.custom-element {
color: tint-color($primary, 10%);
}
.custom-element-2 {
color: shade-color($danger, 30%);
}
Bambancin launi
Domin saduwa da ƙa'idodin samun damar WCAG 2.0 don bambancin launi , dole ne mawallafa su ba da ma'anar bambanci na aƙalla 4.5: 1 , tare da ƴan kaɗan.
Ƙarin aikin da muka haɗa a cikin Bootstrap shine aikin bambancin launi, color-contrast. Yana amfani da Algorithm na WCAG 2.0 don ƙididdige ƙofofin bambanci dangane da hasken dangi a cikin sRGBsararin launi don dawo da haske ta atomatik ( #fff), duhu ( #212529) ko baƙar fata ( #000) launi bambanci dangane da ƙayyadadden launi na tushe. Wannan aikin yana da amfani musamman ga mixins ko madaukai inda kuke samar da azuzuwan da yawa.
Misali, don samar da swatches launi daga $theme-colorstaswirar mu:
@each $color, $value in $theme-colors {
.swatch-#{$color} {
color: color-contrast($value);
}
}
Hakanan za'a iya amfani dashi don buƙatun banbance-banbance na kashe-kashe:
.custom-element {
color: color-contrast(#000); // returns `color: #fff`
}
Hakanan zaka iya ƙayyade launin tushe tare da ayyukan taswirar launi ɗin mu:
.custom-element {
color: color-contrast($dark); // returns `color: #fff`
}
Gudun SVG
Muna amfani da escape-svgaikin don tserewa <, >da #haruffa don hotunan bangon SVG. Lokacin amfani da escape-svgaikin, dole ne a nakalto bayanan URIs.
Ƙara da Rage ayyuka
Muna amfani da ayyuka addda subtractayyuka don kunsa aikin CSS calc. Babban manufar waɗannan ayyuka shine a guje wa kurakurai lokacin da aka ƙaddamar da ƙimar "marasa ɗaya" 0cikin calcmagana. Kalmomi kamar calc(10px - 0)za su dawo da kuskure a cikin duk masu bincike, duk da kasancewar su daidai ta hanyar lissafi.
Misali inda calc yake aiki:
$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);
}
Misali inda calc ɗin ba ya aiki:
$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
Littafin scss/mixins/littafinmu yana da tarin abubuwan haɗin gwiwa waɗanda ke ba da ikon sassan Bootstrap kuma ana iya amfani da su a cikin aikin ku.
Tsarin launi
Ana samun haɗin ɗan gajeren hannu don prefers-color-schemetambayar mai jarida tare da goyan baya ga light, dark, da tsarin launi na al'ada.
@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
}
}