Sass
Sèvi ak fichye sous Sass nou yo pou pwofite varyab, kat, mixin, ak fonksyon pou ede w bati pi vit ak pèsonalize pwojè w la.
Sèvi ak dosye sous Sass nou yo pou pwofite varyab, kat, mixin, ak plis ankò.
Estrikti dosye
Chak fwa sa posib, evite modifye dosye debaz Bootstrap yo. Pou Sass, sa vle di kreye pwòp stylesheet ou ki enpòte Bootstrap pou ou ka modifye ak pwolonje li. Si w ap itilize yon manadjè pake tankou npm, w ap gen yon estrikti dosye ki sanble sa a:
your-project/
├── scss
│ └── custom.scss
└── node_modules/
└── bootstrap
├── js
└── scss
Si w te telechaje fichye sous nou yo epi w pa sèvi ak yon manadjè pakè, w ap vle konfigirasyon manyèlman yon bagay ki sanble ak estrikti sa a, kenbe dosye sous Bootstrap yo separe de pwòp ou yo.
your-project/
├── scss
│ └── custom.scss
└── bootstrap/
├── js
└── scss
Enpòte
Nan custom.scss
, ou pral enpòte dosye Sass sous Bootstrap yo. Ou gen de opsyon: enkli tout Bootstrap, oswa chwazi pati ou bezwen yo. Nou ankouraje lèt la, menm si ou dwe konnen gen kèk kondisyon ak depandans atravè eleman nou yo. W ap bezwen tou mete kèk JavaScript pou grefon nou yo.
// 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
Avèk konfigirasyon sa a an plas, ou ka kòmanse modifye nenpòt nan varyab Sass ak kat nan custom.scss
. Ou kapab tou kòmanse ajoute pati nan Bootstrap anba // Optional
seksyon an jan sa nesesè. Nou sijere pou w sèvi ak pil enpòte plen nan bootstrap.scss
dosye nou an kòm pwen depa w.
Defo varyab
Chak varyab Sass nan Bootstrap gen ladan !default
drapo a ki pèmèt ou pase sou valè default varyab la nan pwòp Sass ou san yo pa modifye kòd sous Bootstrap la. Kopi epi kole varyab yo jan sa nesesè, modifye valè yo, epi retire !default
drapo a. Si yon varyab deja te asiyen, Lè sa a, li pa pral re-asiyen pa valè yo default nan Bootstrap.
Ou pral jwenn lis konplè varyab Bootstrap yo nan scss/_variables.scss
. Gen kèk varyab yo mete sou null
, varyab sa yo pa bay pwopriyete a sof si yo pase sou plas nan konfigirasyon ou a.
Chanjman varyab dwe vini apre fonksyon nou yo enpòte, men anvan rès enpòtasyon yo.
Men yon egzanp ki chanje background-color
ak color
pou <body>
lè enpòte ak konpile Bootstrap atravè 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
Repete jan sa nesesè pou nenpòt varyab nan Bootstrap, ki gen ladan opsyon mondyal ki anba a.
Kat ak bouk
Bootstrap gen ladan yon ti ponyen kat Sass, pè valè kle ki fè li pi fasil pou jenere fanmi CSS ki gen rapò. Nou itilize kat Sass pou koulè nou yo, pwen kadriyaj, ak plis ankò. Menm jan ak varyab Sass, tout kat Sass yo enkli !default
drapo a epi yo ka anile ak pwolonje.
Kèk nan kat Sass nou yo fizyone nan kat vid pa default. Sa a se fè pou pèmèt ekspansyon fasil nan yon kat Sass bay yo, men li vini nan pri pou fè retire atik nan yon kat jeyografik yon ti kras pi difisil.
Modifye kat jeyografik la
Tout varyab nan $theme-colors
kat la defini kòm varyab otonòm. Pou modifye yon koulè ki deja egziste nan $theme-colors
kat jeyografik nou an, ajoute sa ki annapre yo nan dosye Sass koutim ou a:
$primary: #0074d9;
$danger: #ff4136;
Apre sa, varyab sa yo mete nan kat jeyografik Bootstrap la $theme-colors
:
$theme-colors: (
"primary": $primary,
"danger": $danger
);
Ajoute sou kat la
Ajoute nouvo koulè nan $theme-colors
, oswa nenpòt lòt kat, lè w kreye yon nouvo kat Sass ak valè koutim ou yo epi rantre li ak kat orijinal la. Nan ka sa a, nou pral kreye yon nouvo $custom-colors
kat epi rantre li ak $theme-colors
.
// Create your own map
$custom-colors: (
"custom-color": #900
);
// Merge the maps
$theme-colors: map-merge($theme-colors, $custom-colors);
Retire nan kat jeyografik la
Pou retire koulè nan $theme-colors
, oswa nenpòt lòt kat, itilize map-remove
. Ou dwe mete li ant kondisyon nou yo ak opsyon nou yo:
// 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
Kle obligatwa
Bootstrap sipoze prezans kèk kle espesifik nan kat Sass jan nou itilize ak pwolonje sa yo tèt nou. Pandan w ap pèrsonalize kat yo enkli, ou ka rankontre erè kote yo te itilize yon kle kat Sass espesifik.
Pou egzanp, nou itilize primary
, success
, ak danger
kle soti nan $theme-colors
pou lyen, bouton, ak eta fòm yo. Ranplase valè kle sa yo pa ta dwe prezante okenn pwoblèm, men retire yo ka lakòz pwoblèm konpilasyon Sass. Nan ka sa yo, w ap bezwen modifye kòd Sass ki sèvi ak valè sa yo.
Fonksyon
Koulè
Akote kat Sass nou genyen yo, koulè tèm yo ka itilize tou kòm varyab otonòm, tankou $primary
.
.custom-element {
color: $gray-100;
background-color: $dark;
}
Ou ka aleje oswa fè nwa koulè ak Bootstrap a tint-color()
ak shade-color()
fonksyon. Fonksyon sa yo pral melanje koulè ak nwa oswa blan, kontrèman ak natif natal Sass lighten()
ak darken()
fonksyon ki pral chanje légèreté a pa yon kantite lajan fiks, ki souvan pa mennen nan efè a vle.
// 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));
}
Nan pratik, ou ta rele fonksyon an epi pase paramèt koulè ak pwa yo.
.custom-element {
color: tint-color($primary, 10%);
}
.custom-element-2 {
color: shade-color($danger, 30%);
}
Kontras koulè
Pou yo ka satisfè estanda aksè WCAG 2.0 pou kontras koulè , otè yo dwe bay yon rapò kontras omwen 4.5:1 , ak kèk eksepsyon.
Yon lòt fonksyon nou enkli nan Bootstrap se fonksyon kontras koulè a, color-contrast
. Li itilize algorithm WCAG 2.0 pou kalkile papòt kontras ki baze sou luminans relatif nan yon sRGB
espas koulè pou otomatikman retounen yon koulè kontras limyè ( #fff
), nwa ( #212529
) oswa nwa ( #000
) ki baze sou koulè baz espesifye a. Fonksyon sa a itil espesyalman pou mixin oswa bouk kote w ap jenere plizyè klas.
Pou egzanp, jenere echantiyon koulè nan $theme-colors
kat nou an:
@each $color, $value in $theme-colors {
.swatch-#{$color} {
color: color-contrast($value);
}
}
Li kapab tou itilize pou bezwen kontras yon sèl:
.custom-element {
color: color-contrast(#000); // returns `color: #fff`
}
Ou kapab tou presize yon koulè baz ak fonksyon kat koulè nou yo:
.custom-element {
color: color-contrast($dark); // returns `color: #fff`
}
Chape anba SVG
Nou itilize escape-svg
fonksyon an pou chape anba <
, >
ak #
karaktè pou imaj background SVG. Lè w ap itilize escape-svg
fonksyon an, yo dwe site URI done yo.
Add ak Soustraksyon fonksyon
Nou itilize fonksyon yo add
ak subtract
pou vlope fonksyon CSS calc
la. Objektif prensipal fonksyon sa yo se pou evite erè lè 0
yo pase yon valè "unitless" nan yon calc
ekspresyon. Ekspresyon tankou calc(10px - 0)
ap retounen yon erè nan tout navigatè, malgre yo matematik kòrèk.
Egzanp kote kalkil la valab:
$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);
}
Egzanp kote kalkil la pa valab:
$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
Anyè nou an scss/mixins/
gen yon tòn mixin ki pouvwa pati nan Bootstrap epi yo ka itilize tou atravè pwojè pwòp ou a.
Koulè rapid
Yon mixin kout pou prefers-color-scheme
demann medya yo disponib ak sipò pou light
, dark
, ak plan koulè koutim.
@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
}
}