Sass
Uzu niajn fontajn dosierojn Sass por utiligi variablojn, mapojn, miksaĵojn kaj funkciojn por helpi vin konstrui pli rapide kaj personecigi vian projekton.
Uzu niajn fontajn Sass-dosierojn por utiligi variablojn, mapojn, miksaĵojn kaj pli.
Dosiera strukturo
Kiam ajn eblas, evitu modifi la kernajn dosierojn de Bootstrap. Por Sass, tio signifas krei vian propran stilfolion, kiu importas Bootstrap, por ke vi povu modifi kaj etendi ĝin. Supozante, ke vi uzas pakaĵadministrilon kiel npm, vi havos dosierstrukturon kiu aspektas jene:
your-project/
├── scss
│ └── custom.scss
└── node_modules/
└── bootstrap
├── js
└── scss
Se vi elŝutis niajn fontdosierojn kaj ne uzas pakaĵadministrilon, vi volos mane agordi ion similan al tiu strukturo, konservante la fontdosierojn de Bootstrap apartaj de la viaj propraj.
your-project/
├── scss
│ └── custom.scss
└── bootstrap/
├── js
└── scss
Importado
En via custom.scss, vi importos la fontajn Sass-dosierojn de Bootstrap. Vi havas du eblojn: inkluzivi ĉion el Bootstrap, aŭ elektu la partojn, kiujn vi bezonas. Ni kuraĝigas ĉi-lastan, kvankam konsciu, ke ekzistas iuj postuloj kaj dependecoj tra niaj komponantoj. Vi ankaŭ devos inkluzivi iom da JavaScript por niaj kromaĵoj.
// 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
Kun tiu aranĝo, vi povas komenci modifi iun ajn el la Sass-variabloj kaj mapoj en via custom.scss. Vi ankaŭ povas komenci aldoni partojn de Bootstrap sub la // Optionalsekcio laŭbezone. Ni sugestas uzi la plenan importan stakon de nia bootstrap.scssdosiero kiel via deirpunkto.
Variaj defaŭltoj
Ĉiu Sass-variablo en Bootstrap inkluzivas la !defaultflagon ebligante vin superregi la defaŭltan valoron de la variablo en via propra Sass sen modifi la fontkodon de Bootstrap. Kopiu kaj algluu variablojn laŭbezone, modifi iliajn valorojn kaj forigu la !defaultflagon. Se variablo jam estis asignita, tiam ĝi ne estos reasignita per la defaŭltaj valoroj en Bootstrap.
Vi trovos la kompletan liston de la variabloj de Bootstrap en scss/_variables.scss. Iuj variabloj estas agordita al null, ĉi tiuj variabloj ne eligas la posedaĵon krom se ili estas anstataŭitaj en via agordo.
Variaj anstataŭoj devas veni post kiam niaj funkcioj estas importitaj, sed antaŭ la ceteraj importadoj.
Jen ekzemplo, kiu ŝanĝas la background-colorkaj colorpor la <body>dum importado kaj kompilado de Bootstrap per 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
Ripetu laŭbezone por iu ajn variablo en Bootstrap, inkluzive de la tutmondaj elektoj sube.
Mapoj kaj bukloj
Bootstrap inkluzivas kelkajn Sass-mapojn, ŝlosilajn valorparojn, kiuj faciligas generi familiojn de rilataj CSS. Ni uzas Sass-mapojn por niaj koloroj, kradaj rompopunktoj kaj pli. Same kiel Sass-variabloj, ĉiuj Sass-mapoj inkluzivas la !defaultflagon kaj povas esti anstataŭitaj kaj etenditaj.
Kelkaj el niaj Sass-mapoj estas kunfanditaj en malplenajn defaŭlte. Ĉi tio estas farita por permesi facilan vastiĝon de antaŭfiksita Sass-mapo, sed kostas fari forigi erojn de mapo iomete pli malfacila.
Modifi mapon
Ĉiuj variabloj en la $theme-colorsmapo estas difinitaj kiel memstaraj variabloj. Por modifi ekzistantan koloron en nia $theme-colorsmapo, aldonu la jenon al via kutima Sass-dosiero:
$primary: #0074d9;
$danger: #ff4136;
Pli poste, ĉi tiuj variabloj estas fiksitaj en la $theme-colorsmapo de Bootstrap:
$theme-colors: (
"primary": $primary,
"danger": $danger
);
Aldoni al mapo
Aldonu novajn kolorojn al $theme-colors, aŭ al iu ajn alia mapo, kreante novan Sass-mapon kun viaj kutimaj valoroj kaj kunfandante ĝin kun la origina mapo. En ĉi tiu kazo, ni kreos novan $custom-colorsmapon kaj kunfandos ĝin kun $theme-colors.
// Create your own map
$custom-colors: (
"custom-color": #900
);
// Merge the maps
$theme-colors: map-merge($theme-colors, $custom-colors);
Forigi de mapo
Por forigi kolorojn de $theme-colors, aŭ ajna alia mapo, uzu map-remove. Atentu, ke vi devas enmeti ĝin inter niaj postuloj kaj opcioj:
// 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
Bezonataj ŝlosiloj
Bootstrap supozas la ĉeeston de iuj specifaj ŝlosiloj ene de Sass-mapoj dum ni mem uzis kaj etendas ĉi tiujn. Dum vi agordas la inkluzivitajn mapojn, vi povas renkonti erarojn kie specifa Sass-mapo ŝlosilo estas uzata.
Ekzemple, ni uzas la klavojn primary, success, kaj de por ligiloj, butonoj kaj formoŝtatoj. Anstataŭigi la valorojn de ĉi tiuj ŝlosiloj ne devus prezenti problemojn, sed forigi ilin povas kaŭzi problemojn pri kompilo de Sass. En ĉi tiuj kazoj, vi devos modifi la Sass-kodon, kiu uzas tiujn valorojn.danger$theme-colors
Funkcioj
Koloroj
Apud la Sass-mapoj , kiujn ni havas, temokoloroj ankaŭ povas esti uzataj kiel memstaraj variabloj, kiel $primary.
.custom-element {
color: $gray-100;
background-color: $dark;
}
Vi povas malpezigi aŭ mallumigi kolorojn per Bootstrap tint-color()kaj shade-color()funkcioj. Ĉi tiuj funkcioj miksos kolorojn kun nigra aŭ blanka, male al la denaska de Sass lighten()kaj darken()funkcioj, kiuj ŝanĝos la malpezecon je fiksa kvanto, kio ofte ne kondukas al la dezirata efiko.
// 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));
}
En praktiko, vi vokus la funkcion kaj enigus la kolor- kaj pezparametrojn.
.custom-element {
color: tint-color($primary, 10%);
}
.custom-element-2 {
color: shade-color($danger, 30%);
}
Kolora kontrasto
Por kontentigi WCAG 2.0-alireblajn normojn por kolorkontrasto , verkintoj devas disponigi kontrastproporcion de almenaŭ 4.5:1 , kun tre malmultaj esceptoj.
Plia funkcio, kiun ni inkluzivas en Bootstrap, estas la kolorkontrasta funkcio, color-contrast. Ĝi utiligas la WCAG 2.0-algoritmon por kalkulado de kontrastosojloj bazitaj sur relativa lumeco en sRGBkolorspaco por aŭtomate resendi malpezan ( #fff), malhelan ( #212529) aŭ nigran ( #000) kontrastan koloron bazitan sur la specifita bazkoloro. Ĉi tiu funkcio estas precipe utila por miksaĵoj aŭ bukloj, kie vi generas plurajn klasojn.
Ekzemple, por generi kolorajn specimenojn de nia $theme-colorsmapo:
@each $color, $value in $theme-colors {
.swatch-#{$color} {
color: color-contrast($value);
}
}
Ĝi ankaŭ povas esti uzata por unufojaj kontrastaj bezonoj:
.custom-element {
color: color-contrast(#000); // returns `color: #fff`
}
Vi ankaŭ povas specifi bazan koloron per niaj kolormapaj funkcioj:
.custom-element {
color: color-contrast($dark); // returns `color: #fff`
}
Eskapu SVG
Ni uzas la escape-svgfunkcion por eskapi la <, >kaj #signojn por SVG-fonbildoj. Dum uzado de la escape-svgfunkcio, datumoj URI-oj devas esti cititaj.
Aldonu kaj Subtrahi funkciojn
Ni uzas la funkciojn addkaj subtractpor envolvi la CSS- calcfunkcion. La ĉefa celo de ĉi tiuj funkcioj estas eviti erarojn kiam "senunuo" 0valoro estas transdonita en calcesprimon. Esprimoj kiel calc(10px - 0)resendos eraron en ĉiuj retumiloj, malgraŭ esti matematike ĝustaj.
Ekzemplo kie la kalkulo validas:
$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);
}
Ekzemplo kie la kalkulo estas nevalida:
$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);
}
Miksinoj
Nia scss/mixins/dosierujo havas multon da miksaĵoj, kiuj potencas partojn de Bootstrap kaj ankaŭ povas esti uzataj tra via propra projekto.
Koloraj skemoj
Stenografiomiksaĵo por la prefers-color-schemeamaskomunikila demando estas havebla kun subteno por light, dark, kaj kutimaj kolorskemoj.
@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
}
}