Sass
Uża l-fajls Sass tas-sors tagħna biex tieħu vantaġġ minn varjabbli, mapep, mixins, u funzjonijiet biex jgħinuk tibni aktar malajr u tippersonalizza l-proġett tiegħek.
Uża l-fajls Sass tas-sors tagħna biex tieħu vantaġġ minn varjabbli, mapep, mixins, u aktar.
Struttura tal-fajl
Kull meta jkun possibbli, evita li timmodifika l-fajls ewlenin tal-Bootstrap. Għal Sass, dan ifisser li toħloq stylesheet tiegħek stess li timporta Bootstrap sabiex tkun tista' timmodifikaha u testendiha. Jekk wieħed jassumi li qed tuża maniġer tal-pakketti bħal npm, ser ikollok struttura tal-fajls li tidher bħal din:
your-project/
├── scss
│ └── custom.scss
└── node_modules/
└── bootstrap
├── js
└── scss
Jekk niżżilt il-fajls tas-sors tagħna u m'intix qed tuża maniġer tal-pakketti, tkun trid issettja manwalment xi ħaġa simili għal dik l-istruttura, u żżomm il-fajls tas-sors ta' Bootstrap separati minn tiegħek.
your-project/
├── scss
│ └── custom.scss
└── bootstrap/
├── js
└── scss
L-importazzjoni
Fil- custom.scss
, int ser timporta l-fajls Sass sors ta' Bootstrap. Għandek żewġ għażliet: inkludi Bootstrap kollu, jew agħżel il-partijiet li għandek bżonn. Inħeġġu lil dawn tal-aħħar, għalkemm kun konxju li hemm xi rekwiżiti u dipendenzi madwar il-komponenti tagħna. Ikollok bżonn ukoll tinkludi xi JavaScript għall-plugins tagħna.
// 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
B'dik is-setup fis-seħħ, tista 'tibda timmodifika kwalunkwe waħda mill-varjabbli u l-mapep Sass fil- custom.scss
. Tista 'wkoll tibda żżid partijiet ta' Bootstrap taħt it- // Optional
taqsima kif meħtieġ. Nissuġġerixxu li tuża l-munzell sħiħ ta 'importazzjoni mill- bootstrap.scss
fajl tagħna bħala l-punt tat-tluq tiegħek.
Inadempjenzi varjabbli
Kull varjabbli Sass f'Bootstrap tinkludi l- !default
bandiera li tippermettilek tegħleb il-valur default tal-varjabbli fis-Sass tiegħek stess mingħajr ma timmodifika l-kodiċi sors ta' Bootstrap. Ikkopja u waħħal il-varjabbli kif meħtieġ, immodifika l-valuri tagħhom, u neħħi l- !default
bandiera. Jekk varjabbli tkun diġà ġiet assenjata, allura ma tkunx assenjata mill-ġdid mill-valuri awtomatiċi f'Bootstrap.
Issib il-lista kompleta tal-varjabbli ta' Bootstrap f' scss/_variables.scss
. Xi varjabbli huma ssettjati għal null
, dawn il-varjabbli ma joħorġux il-proprjetà sakemm ma jiġux sostitwiti fil-konfigurazzjoni tiegħek.
L-overrides varjabbli għandhom jiġu wara li l-funzjonijiet tagħna jiġu importati, iżda qabel il-bqija tal-importazzjonijiet.
Hawn eżempju li jibdel l- background-color
u color
għall- <body>
meta jimporta u jikkompila Bootstrap permezz 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
Irrepeti kif meħtieġ għal kwalunkwe varjabbli f'Bootstrap, inklużi l-għażliet globali hawn taħt.
Mapep u loops
Bootstrap jinkludi numru żgħir ta 'mapep Sass, pari ta' valur ewlenin li jagħmluha aktar faċli biex tiġġenera familji ta 'CSS relatati. Aħna nużaw il-mapep Sass għall-kuluri tagħna, il-punti ta 'waqfien tal-grilja, u aktar. Eżatt bħall-varjabbli Sass, il-mapep kollha Sass jinkludu l- !default
bandiera u jistgħu jiġu sostitwiti u estiżi.
Uħud mill-mapep Sass tagħna huma magħquda f'dawk vojta awtomatikament. Dan isir biex jippermetti espansjoni faċli ta 'mappa Sass partikolari, iżda jiġi għall-ispiża li tagħmel it- tneħħija ta ' oġġetti minn mappa kemmxejn aktar diffiċli.
Ibdel il-mappa
Il-varjabbli kollha fil- $theme-colors
mappa huma definiti bħala varjabbli waħedhom. Biex timmodifika kulur eżistenti fil- $theme-colors
mappa tagħna, żid dan li ġej mal-fajl Sass tad-dwana tiegħek:
$primary: #0074d9;
$danger: #ff4136;
Aktar tard, dawn il-varjabbli huma stabbiliti fil- $theme-colors
mappa ta 'Bootstrap:
$theme-colors: (
"primary": $primary,
"danger": $danger
);
Żid mal-mappa
Żid kuluri ġodda ma' $theme-colors
, jew kwalunkwe mappa oħra, billi toħloq mappa Sass ġdida bil-valuri tad-dwana tiegħek u għaqqadha mal-mappa oriġinali. F'dan il-każ, aħna noħolqu $custom-colors
mappa ġdida u ngħaqqduha ma' $theme-colors
.
// Create your own map
$custom-colors: (
"custom-color": #900
);
// Merge the maps
$theme-colors: map-merge($theme-colors, $custom-colors);
Neħħi mill-mappa
Biex tneħħi kuluri minn $theme-colors
, jew minn kwalunkwe mappa oħra, uża map-remove
. Kun konxju li trid daħħalha bejn ir-rekwiżiti u l-għażliet tagħna:
// 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
Ċwievet meħtieġa
Bootstrap jassumi l-preżenza ta 'xi ċwievet speċifiċi fi ħdan il-mapep Sass kif użajna u testendi dawn aħna stess. Hekk kif tippersonalizza l-mapep inklużi, tista’ tiltaqa’ ma’ żbalji fejn tkun qed tintuża ċavetta speċifika ta’ mappa Sass.
Pereżempju, nużaw iċ- ċwievet primary
, success
, u minn għal links, buttuni u stati tal-formola. Is-sostituzzjoni tal-valuri ta 'dawn iċ-ċwievet m'għandha tippreżenta l-ebda problemi, iżda t-tneħħija tagħhom tista' tikkawża problemi ta 'kumpilazzjoni ta' Sass. F'dawn il-każijiet, ikollok bżonn timmodifika l-kodiċi Sass li jagħmel użu minn dawk il-valuri.danger
$theme-colors
Funzjonijiet
Kuluri
Ħdejn il- mapep Sass li għandna, il-kuluri tat-temi jistgħu jintużaw ukoll bħala varjabbli waħedhom, bħal $primary
.
.custom-element {
color: $gray-100;
background-color: $dark;
}
Tista 'tħaffef jew tiskura l-kuluri bil-Bootstrap's tint-color()
u l- shade-color()
funzjonijiet. Dawn il-funzjonijiet se jħalltu kuluri bl-iswed jew abjad, b'differenza Sass nattiv lighten()
u darken()
funzjonijiet li se jibdlu l-ħeffa b'ammont fiss, li ħafna drabi ma jwassalx għall-effett mixtieq.
// 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));
}
Fil-prattika, inti ssejjaħ il-funzjoni u tgħaddi l-parametri tal-kulur u l-piż.
.custom-element {
color: tint-color($primary, 10%);
}
.custom-element-2 {
color: shade-color($danger, 30%);
}
Kuntrast tal-kulur
Sabiex jilħqu l -istandards ta' aċċessibbiltà WCAG 2.0 għall-kuntrast tal-kulur , l-awturi għandhom jipprovdu proporzjon ta' kuntrast ta' mill-inqas 4.5:1 , bi ftit eċċezzjonijiet.
Funzjoni addizzjonali li ninkludu f'Bootstrap hija l-funzjoni tal-kuntrast tal-kulur, color-contrast
. Jutilizza l- algoritmu WCAG 2.0 għall-kalkolu ta 'limiti ta' kuntrast ibbażati fuq luminanza relattiva fi spazju tal- sRGB
kulur biex awtomatikament jirritorna kulur ta 'kuntrast ċar ( #fff
), skur ( #212529
) jew iswed ( #000
) ibbażat fuq il-kulur bażi speċifikat. Din il-funzjoni hija speċjalment utli għal mixins jew loops fejn qed tiġġenera klassijiet multipli.
Pereżempju, biex tiġġenera kampjuni tal-kulur mill- $theme-colors
mappa tagħna:
@each $color, $value in $theme-colors {
.swatch-#{$color} {
color: color-contrast($value);
}
}
Jista' jintuża wkoll għal bżonnijiet ta' kuntrast ta' darba:
.custom-element {
color: color-contrast(#000); // returns `color: #fff`
}
Tista' wkoll tispeċifika kulur bażi bil-funzjonijiet tagħna tal-mappa tal-kulur:
.custom-element {
color: color-contrast($dark); // returns `color: #fff`
}
Ħarab SVG
Aħna nużaw il- escape-svg
funzjoni biex naħarbu l- <
, >
u l- #
karattri għal stampi fl-isfond SVG. Meta tuża l- escape-svg
funzjoni, l-URIs tad-dejta għandhom jiġu kkwotati.
Żid u Naqqas il-funzjonijiet
Aħna nużaw il- funzjonijiet add
u subtract
biex nagħlaq il-funzjoni CSS calc
. L-għan primarju ta 'dawn il-funzjonijiet huwa li jiġu evitati żbalji meta 0
valur "mingħajr unità" jiġi mgħoddi calc
f'espressjoni. Espressjonijiet bħal calc(10px - 0)
dawn jirritornaw żball fil-browsers kollha, minkejja li huma matematikament korretti.
Eżempju fejn il-calc huwa validu:
$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);
}
Eżempju fejn il-calc huwa invalidu:
$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
Id-direttorju tagħna scss/mixins/
għandu ton ta 'mixins li jħaddmu partijiet ta' Bootstrap u jistgħu jintużaw ukoll fil-proġett tiegħek stess.
Skemi tal-kulur
Mixin shorthand għall- prefers-color-scheme
mistoqsija tal-midja hija disponibbli b'appoġġ għal light
, dark
, u skemi ta' kuluri tad-dwana.
@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
}
}