Sass
Fa'aaoga a matou faila faila Sass e fa'aoga lelei ai fesuiaiga, fa'afanua, fa'afefiloi, ma galuega e fesoasoani ia te oe e fausia vave ma fa'avasega lau galuega.
Fa'aaoga a matou faila faila Sass e fa'aoga lelei ai fesuiaiga, fa'afanua, fa'afefiloi, ma isi mea.
Faiga faila
Soo se taimi e mafai ai, aloese mai le suia o faila autu a Bootstrap. Mo Sass, o lona uiga o le fatuina o lau lava sitaili e aumai ai le Bootstrap ina ia mafai ona e suia ma faʻalautele. Faʻapea o loʻo e faʻaaogaina se pule o pusa e pei o le npm, o le ai ai sau faila faila e pei o lenei:
your-project/
├── scss
│ └── custom.scss
└── node_modules/
└── bootstrap
├── js
└── scss
Afai na e siiina mai a matou faila faila ma e te le o faʻaogaina se pule o pusa, e te manaʻo e fai ma le lima se mea e tutusa ma lena fausaga, faʻapipiʻi ese faila a Bootstrap mai oe lava.
your-project/
├── scss
│ └── custom.scss
└── bootstrap/
├── js
└── scss
Fa'aulufaleina mai
I lau custom.scss, e te fa'aulufaleina mai faila Sass puna a Bootstrap. E lua au filifiliga: aofia uma Bootstrap, pe filifili vaega e te manaʻomia. Matou te faʻamalosia le mulimuli, e ui ina ia nofouta e iai nisi o manaʻoga ma faʻalagolago i a matou vaega. E te manaʻomia foʻi le faʻaofiina o nisi JavaScript mo a matou plugins.
// 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";
// 4. Include any default map overrides here
// 5. Include remainder of required parts
@import "../node_modules/bootstrap/scss/maps";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";
// 6. Optionally include any other parts 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";
// 7. Optionally include utilities API last to generate classes based on the Sass map in `_utilities.scss`
@import "../node_modules/bootstrap/scss/utilities/api";
// 8. Add additional custom code here
Faatasi ai ma lena seti i le nofoaga, e mafai ona e amata suia soʻo se suiga o Sass ma faʻafanua i lau custom.scss. E mafai foi ona e amata faʻaopoopo vaega o Bootstrap i lalo o le // Optionalvaega pe a manaʻomia. Matou te fautua atu e fa'aaoga le fa'aputuga fa'aulufale atoa mai la matou bootstrap.scssfaila e fai ma ou amataga.
Fa'aletonu suiga
O fesuiaiga uma o Sass i Bootstrap e aofia ai le !defaultfuʻa e mafai ai ona e faʻamalo le tau le aoga o le fesuiaiga i lau lava Sass e aunoa ma le suia o le code source a Bootstrap. Kopi ma faapipii fesuiaiga pe a manaʻomia, sui o latou tau, ma aveese le !defaultfuʻa. Afai ua uma ona tuʻuina atu se fesuiaiga, o le a le toe tuʻuina atu e le tau faʻaletonu i Bootstrap.
O le ae mauaina le lisi atoa o fesuiaiga a Bootstrap i scss/_variables.scss. O nisi fesuiaiga e seti i le null, o nei fesuiaiga e le mafai ona faʻaalia le meatotino seʻi vagana ua faʻamalo i lau faʻatulagaga.
E tatau ona o'o mai suiga fesuisuia'i pe a mae'a ona fa'aulufale mai a tatou galuega, ae le'i o'o i isi vaega o fa'aulufale mai.
O se faʻataʻitaʻiga lea e suia ai le background-colorma colormo le <body>taimi e faʻaulu mai ai ma tuʻufaʻatasia Bootstrap e ala ile 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/maps";
@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
Toe fai pe a manaʻomia mo soʻo se fesuiaiga i Bootstrap, e aofia ai le lalolagi filifiliga o loʻo i lalo.
Faafanua ma matasele
O le Bootstrap e aofia ai nai fa'afanua Sass, pa'aga taua e fa'afaigofie ai ona fa'atupuina aiga o le CSS fa'atatau. Matou te fa'aogaina fa'afanua Sass mo a matou lanu, fa'asologa fa'asologa, ma isi mea. E pei lava o suiga a Sass, o fa'afanua Sass uma e aofia ai le !defaultfu'a ma e mafai ona fa'asili ma fa'alautele.
O nisi o matou fa'afanua Sass ua tu'ufa'atasia i fa'afanua gaogao ona o le fa'aletonu. E faia lea mea ina ia fa'afaigofie ai le fa'alauteleina o se fa'afanua Sass ua tu'uina atu, ae e sau i le tau o le aveesea o mea mai se fa'afanua e fai si faigata.
Suia faafanua
O fesuiaiga uma i le $theme-colorsfaafanua o loʻo faʻamatalaina o ni fesuiaiga tuʻufua. Ina ia suia se lanu o loʻo i ai i la matou $theme-colorsfaʻafanua, faʻaopoopo mea nei i lau faila masani Sass:
$primary: #0074d9;
$danger: #ff4136;
Mulimuli ane, o nei fesuiaiga o loʻo seti i le $theme-colorsfaʻafanua a Bootstrap:
$theme-colors: (
"primary": $primary,
"danger": $danger
);
Faaopoopo i le faafanua
Fa'aopoopo lanu fou i le $theme-colors, po'o so'o se isi fa'afanua, e ala i le faia o se fa'afanua fou Sass ma au aga masani ma tu'u fa'atasi ma le fa'afanua muamua. I lenei tulaga, matou te faia se $custom-colorsfaafanua fou ma tuʻufaʻatasia ma $theme-colors.
// Create your own map
$custom-colors: (
"custom-color": #900
);
// Merge the maps
$theme-colors: map-merge($theme-colors, $custom-colors);
Aveese mai faafanua
Ina ia aveese lanu mai le $theme-colors, poʻo soʻo se isi faʻafanua, faʻaaoga map-remove. Ia nofouta e tatau ona e faʻaofi $theme-colorsi le va o matou manaʻoga pe a maeʻa lona faʻamatalaga i totonu variablesma aʻo leʻi faʻaaogaina i maps:
// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
$theme-colors: map-remove($theme-colors, "info", "light", "dark");
@import "../node_modules/bootstrap/scss/maps";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";
// Optional
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
// etc
Manaomia ki
Bootstrap o loʻo faʻapea o loʻo iai ni ki faʻapitoa i totonu o faʻafanua Sass aʻo matou faʻaogaina ma faʻalauteleina i matou lava. A'o e fa'avasegaina fa'afanua o lo'o aofia ai, e te ono tula'i mai ni mea sese o lo'o fa'aogaina ai se ki fa'afanua patino a Sass.
Mo se fa'ata'ita'iga, matou te fa'aogaina le primary, success, ma dangerki mai $theme-colorsmo so'oga, fa'amau, ma fomu. O le suia o tulaga taua o nei ki e le tatau ona i ai ni faʻafitauli, ae o le aveeseina e ono mafua ai faʻafitauli Sass tuʻufaʻatasia. I nei tulaga, e te manaʻomia le suia o le Sass code e faʻaogaina ai na tulaga taua.
Galuega
Lanu
I tafatafa o faafanua Sass o loʻo ia i matou, e mafai foʻi ona faʻaogaina lanu autu e fai ma sui faʻapitoa, pei o $primary.
.custom-element {
color: $gray-100;
background-color: $dark;
}
E mafai ona e fa'amalamalamaina pe fa'apogisa lanu i Bootstrap's tint-color()ma shade-color()galuega. O nei gaioiga o le a faʻafefiloi lanu ma le uliuli poʻo le paʻepaʻe, e le pei o Sass 'tagata moni lighten()ma darken()galuega e suia ai le mama i se aofaiga tumau, lea e masani ona le oʻo atu i le manaʻoga.
// 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));
}
I le faʻatinoga, e te valaʻau i le galuega ma pasi i le lanu ma le mamafa parakalafa.
.custom-element {
color: tint-color($primary, 10%);
}
.custom-element-2 {
color: shade-color($danger, 30%);
}
Fa'afeagai lanu
Ina ia mafai ona fa'amalieina mana'oga fa'atusatusa i luga ole laiga i luga ole laiga (WCAG) , e tatau i tusitala ona tu'uina atu se fa'atusatusaga la'ititi o le lanu o tusitusiga o le 4.5:1 ma le fa'atusatusaga la'ititi o lanu e le o ni tusitusiga o le 3:1 , fa'atasi ai ma ni nai fa'alavelave.
Ina ia fesoasoani i lenei mea, matou te aofia ai le color-contrastgaluega i Bootstrap. E fa'aogaina le WCAG fa'atusatusaga fa'atusatusa algorithm mo le fa'atatauina o va'aiga fa'atusatusa e fa'atatau i le malamalama fa'atatau i se sRGBavanoa lanu e otometi ai ona toe fa'afo'i mai se moli ( #fff), pogisa ( #212529) po'o le uliuli ( #000) lanu fa'atusatusa e fa'atatau i le lanu fa'avae ua fa'amaonia. O lenei galuega e sili ona aoga mo faʻafefiloi poʻo faʻamau e te faʻatupuina ai le tele o vasega.
Mo se faʻataʻitaʻiga, ia faʻatupuina suʻega lanu mai la matou $theme-colorsfaʻafanua:
@each $color, $value in $theme-colors {
.swatch-#{$color} {
color: color-contrast($value);
}
}
E mafai foʻi ona faʻaaogaina mo manaʻoga faʻatusatusa tasi:
.custom-element {
color: color-contrast(#000); // returns `color: #fff`
}
E mafai foi ona e faʻamaonia se lanu faʻavae i la matou faʻafanua lanu galuega:
.custom-element {
color: color-contrast($dark); // returns `color: #fff`
}
Sola SVG
Matou te fa'aogaina le escape-svggaluega e sola ese ai mai le <, >ma #mataitusi mo ata SVG pito i tua. A fa'aogaina le escape-svggaluega, e tatau ona fa'ailoa mai fa'amaumauga URI.
Fa'aopoopo ma To'ese galuega
Matou te fa'aogaina le addma subtractgaluega e afifi ai le calcgaluega CSS. O le autu autu o nei galuega o le aloese mai mea sese pe a tuʻuina atu se tau "leai se tasi" 0i se calcfaʻamatalaga. O fa'amatalaga e pei o calc(10px - 0)le a toe fa'afo'i mai ai se mea sese i su'esu'ega uma, e ui lava e sa'o ile matematika.
Fa'ata'ita'iga o lo'o aoga le fa'atatau:
$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);
}
Fa'ata'ita'iga pe a le aoga le calc:
$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
O la matou scss/mixins/lisi o loʻo i ai le tele o mea faʻafefiloi e mana vaega o Bootstrap ma e mafai foi ona faʻaoga i lau lava poloketi.
Fa'ailoga lanu
O lo'o maua se fa'afefiloi pu'upu'u mo le prefers-color-schemesu'esu'ega fa'asalalau fa'atasi ai ma le lagolago mo le light, dark, ma fa'ailoga lanu fa'apitoa.
@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
}
}