Sass
Përdorni skedarët tanë burimor Sass për të përfituar nga variablat, hartat, përzierjet dhe funksionet për t'ju ndihmuar të ndërtoni më shpejt dhe të personalizoni projektin tuaj.
Përdorni skedarët tanë burimor Sass për të përfituar nga variablat, hartat, përzierjet dhe më shumë.
Struktura e skedarit
Kurdoherë që është e mundur, shmangni modifikimin e skedarëve bazë të Bootstrap. Për Sass, kjo do të thotë të krijoni fletën tuaj të stilit që importon Bootstrap në mënyrë që të mund ta modifikoni dhe zgjeroni atë. Duke supozuar se po përdorni një menaxher paketash si npm, do të keni një strukturë skedari që duket si kjo:
your-project/
├── scss
│ └── custom.scss
└── node_modules/
└── bootstrap
├── js
└── scss
Nëse keni shkarkuar skedarët tanë burimor dhe nuk jeni duke përdorur një menaxher paketash, do të dëshironi të konfiguroni manualisht diçka të ngjashme me atë strukturë, duke i mbajtur skedarët burimor të Bootstrap të ndara nga tuajat.
your-project/
├── scss
│ └── custom.scss
└── bootstrap/
├── js
└── scss
Importimi
Në tuaj custom.scss, ju do të importoni skedarët burimor Sass të Bootstrap. Ju keni dy opsione: përfshini të gjithë Bootstrap, ose zgjidhni pjesët që ju nevojiten. Ne inkurajojmë këtë të fundit, megjithëse kini parasysh se ka disa kërkesa dhe varësi në të gjithë komponentët tanë. Ju gjithashtu do të duhet të përfshini disa JavaScript për shtojcat tona.
// 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";
// 4. Include any optional Bootstrap components as you like
@import "../node_modules/bootstrap/scss/root";
@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";
// 5. Add additional custom code here
Me këtë konfigurim në vend, mund të filloni të modifikoni cilindo nga variablat dhe hartat Sass në custom.scss. Ju gjithashtu mund të filloni të shtoni pjesë të Bootstrap nën // Optionalseksionin sipas nevojës. Ne sugjerojmë përdorimin e pirgut të plotë të importit nga bootstrap.scssskedari ynë si pikënisje.
Standardet e ndryshueshme
Çdo variabël Sass në Bootstrap përfshin !defaultflamurin që ju lejon të anashkaloni vlerën e paracaktuar të ndryshores në Sass-in tuaj pa modifikuar kodin burimor të Bootstrap. Kopjoni dhe ngjitni variablat sipas nevojës, modifikoni vlerat e tyre dhe hiqni !defaultflamurin. Nëse një variabël tashmë është caktuar, atëherë nuk do të ricaktohet nga vlerat e paracaktuara në Bootstrap.
Ju do të gjeni listën e plotë të variablave të Bootstrap në scss/_variables.scss. Disa variabla janë vendosur në null, këto variabla nuk e nxjerrin veçorinë nëse nuk janë anashkaluar në konfigurimin tuaj.
Mbështetjet e variablave duhet të vijnë pasi të importohen funksionet tona, por përpara pjesës tjetër të importeve.
Këtu është një shembull që ndryshon background-colordhe colorpër <body>kur importoni dhe përpiloni Bootstrap përmes 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";
// Optional Bootstrap components here
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
// etc
Përsëriteni sipas nevojës për çdo variabël në Bootstrap, duke përfshirë opsionet globale më poshtë.
Hartat dhe sythe
Bootstrap përfshin një pjesë të vogël të hartave Sass, çifte të vlerave kryesore që e bëjnë më të lehtë gjenerimin e familjeve të CSS të lidhura. Ne përdorim hartat Sass për ngjyrat tona, pikat e ndarjes së rrjetit dhe më shumë. Ashtu si variablat Sass, të gjitha hartat Sass përfshijnë !defaultflamurin dhe mund të anashkalohen dhe zgjerohen.
Disa nga hartat tona Sass janë shkrirë në ato boshe si parazgjedhje. Kjo është bërë për të lejuar zgjerimin e lehtë të një harte të caktuar Sass, por vjen me koston e heqjes së artikujve nga një hartë pak më e vështirë.
Modifiko hartën
Të gjitha variablat në $theme-colorshartë përcaktohen si variabla të pavarur. Për të modifikuar një ngjyrë ekzistuese në $theme-colorshartën tonë, shtoni sa vijon në skedarin tuaj të personalizuar Sass:
$primary: #0074d9;
$danger: #ff4136;
Më vonë, këto variabla vendosen në $theme-colorshartën e Bootstrap:
$theme-colors: (
"primary": $primary,
"danger": $danger
);
Shto në hartë
Shtoni ngjyra të reja në $theme-colors, ose ndonjë hartë tjetër, duke krijuar një hartë të re Sass me vlerat tuaja të personalizuara dhe duke e bashkuar me hartën origjinale. Në këtë rast, ne do të krijojmë një $custom-colorshartë të re dhe do ta bashkojmë me $theme-colors.
// Create your own map
$custom-colors: (
"custom-color": #900
);
// Merge the maps
$theme-colors: map-merge($theme-colors, $custom-colors);
Hiq nga harta
Për të hequr ngjyrat nga $theme-colors, ose ndonjë hartë tjetër, përdorni map-remove. Kini parasysh se duhet ta futni atë midis kërkesave dhe opsioneve tona:
// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";
$theme-colors: map-remove($theme-colors, "info", "light", "dark");
// Optional
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
// etc
Çelësat e kërkuar
Bootstrap supozon praninë e disa çelësave specifikë brenda hartave Sass pasi i kemi përdorur dhe i zgjerojmë vetë. Ndërsa personalizoni hartat e përfshira, mund të hasni gabime kur përdoret një çelës specifik i hartës Sass.
Për shembull, ne përdorim çelësat primary, success, dhe dangernga $theme-colorspër lidhjet, butonat dhe gjendjet e formës. Zëvendësimi i vlerave të këtyre çelësave nuk duhet të paraqesë probleme, por heqja e tyre mund të shkaktojë probleme me përpilimin e Sass. Në këto raste, do t'ju duhet të modifikoni kodin Sass që i përdor ato vlera.
Funksione
Ngjyrat
Pranë hartave Sass që kemi, ngjyrat e temave mund të përdoren gjithashtu si variabla të pavarur, si $primaryp.sh.
.custom-element {
color: $gray-100;
background-color: $dark;
}
Ju mund të ndriçoni ose errësoni ngjyrat me Bootstrap tint-color()dhe shade-color()funksionet. Këto funksione do të përziejnë ngjyrat me të zezën ose të bardhën, ndryshe nga funksionet vendase të Sass lighten()dhe darken()funksionet që do të ndryshojnë lehtësinë me një sasi fikse, gjë që shpesh nuk çon në efektin e dëshiruar.
// 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));
}
Në praktikë, ju do të thërrisni funksionin dhe do të kaloni në parametrat e ngjyrës dhe peshës.
.custom-element {
color: tint-color($primary, 10%);
}
.custom-element-2 {
color: shade-color($danger, 30%);
}
Kontrasti i ngjyrave
Për të përmbushur standardet e aksesueshmërisë WCAG 2.0 për kontrastin e ngjyrave , autorët duhet të ofrojnë një raport kontrasti prej të paktën 4.5:1 , me shumë pak përjashtime.
Një funksion shtesë që ne përfshijmë në Bootstrap është funksioni i kontrastit të ngjyrave, color-contrast. Ai përdor algoritmin WCAG 2.0 për llogaritjen e pragjeve të kontrastit bazuar në ndriçimin relativ në një sRGBhapësirë ngjyrash për të kthyer automatikisht një ngjyrë kontrasti të lehtë ( #fff), të errët ( #212529) ose të zezë ( #000) bazuar në ngjyrën bazë të specifikuar. Ky funksion është veçanërisht i dobishëm për miksin ose lak ku jeni duke gjeneruar klasa të shumta.
Për shembull, për të gjeneruar mostra me ngjyra nga $theme-colorsharta jonë:
@each $color, $value in $theme-colors {
.swatch-#{$color} {
color: color-contrast($value);
}
}
Mund të përdoret gjithashtu për nevoja të njëhershme të kontrastit:
.custom-element {
color: color-contrast(#000); // returns `color: #fff`
}
Ju gjithashtu mund të specifikoni një ngjyrë bazë me funksionet tona të hartës së ngjyrave:
.custom-element {
color: color-contrast($dark); // returns `color: #fff`
}
Ik SVG
Ne përdorim escape-svgfunksionin për t'i shpëtuar <, >dhe #karakteret për imazhet e sfondit SVG. Kur përdorni escape-svgfunksionin, URI-të e të dhënave duhet të citohen.
Funksionet e mbledhjes dhe zbritjes
Ne përdorim funksionet adddhe subtractpër të mbështjellë calcfunksionin CSS. Qëllimi kryesor i këtyre funksioneve është të shmangin gabimet kur një 0vlerë "pa njësi" kalohet në një calcshprehje. Shprehjet si calc(10px - 0)do të kthejnë një gabim në të gjithë shfletuesit, pavarësisht se janë matematikisht të sakta.
Shembull ku llogaritja është e vlefshme:
$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);
}
Shembull ku llogaritja është e pavlefshme:
$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);
}
Përzierjet
Drejtoria jonë scss/mixins/ka një ton miksash që fuqizojnë pjesë të Bootstrap dhe mund të përdoren gjithashtu në projektin tuaj.
Skemat e ngjyrave
Një përzierje stenografike për prefers-color-schemepyetjen e medias është e disponueshme me mbështetje për light, dark, dhe skemat e personalizuara të ngjyrave.
@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
}
}