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.

I luga o lenei itulau

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.

Amata i Bootstrap e ala i le npm ma la matou poloketi amata! Ulu i le twbs/bootstrap-npm-starter template repository e vaʻai pe faʻapefea ona fausia ma faʻavasega Bootstrap i lau lava galuega npm. E aofia ai Sass compiler, Autoprefixer, Stylelint, PurgeCSS, ma Bootstrap Icons.

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
  }
}