Sass

E hoʻohana i kā mākou kumu waihona Sass e hoʻohana pono i nā ʻano like ʻole, nā palapala ʻāina, nā huila, a me nā hana e kōkua iā ʻoe e kūkulu wikiwiki a hana i kāu papahana.

Ma kēia ʻaoʻao

E hoʻohana i kā mākou kumu waihona Sass e hoʻohana i nā mea hoʻololi, palapala ʻāina, hui pū, a me nā mea hou aku.

Hoʻolālā waihona

I ka manawa hiki, e pale i ka hoʻololi ʻana i nā faila kumu o Bootstrap. No Sass, ʻo ia hoʻi ka hana ʻana i kāu stylesheet ponoʻī e lawe mai iā Bootstrap i hiki iā ʻoe ke hoʻololi a hoʻonui. Ke manaʻo nei ʻoe e hoʻohana ana i kahi mana hoʻokele e like me npm, e loaʻa iā ʻoe kahi ʻano faila e like me kēia:

your-project/
├── scss
│   └── custom.scss
└── node_modules/
    └── bootstrap
        ├── js
        └── scss

Inā ua hoʻoiho ʻoe i kā mākou waihona kumu a ʻaʻole ʻoe e hoʻohana i ka mana pūʻolo, makemake ʻoe e hana lima i kahi mea e like me kēlā ʻano, e hoʻokaʻawale i nā faila kumu o Bootstrap mai kāu ponoʻī.

your-project/
├── scss
│   └── custom.scss
└── bootstrap/
    ├── js
    └── scss

Ke lawe mai nei

Ma kāu custom.scss, e hoʻokomo i nā faila Sass kumu o Bootstrap. Loaʻa iā ʻoe nā koho ʻelua: e hoʻokomo i nā Bootstrap āpau, a i ʻole e koho i nā ʻāpana āu e pono ai. Paipai mākou i ka mea hope, ʻoiai e ʻike ʻoe aia kekahi mau koi a me nā hilinaʻi ma waena o kā mākou ʻāpana. Pono ʻoe e hoʻokomo i kekahi JavaScript no kā mākou 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

Me kēlā hoʻonohonoho i kahi, hiki iā ʻoe ke hoʻomaka e hoʻololi i kekahi o nā ʻano Sass a me nā palapala 'āina i kāu custom.scss. Hiki iā ʻoe ke hoʻomaka e hoʻohui i nā ʻāpana o Bootstrap ma lalo o ka // Optionalʻāpana e like me ka mea e pono ai. Manaʻo mākou e hoʻohana i ka waihona hoʻokomo piha mai kā mākoubootstrap.scss faila ma ke ʻano he hoʻomaka.

Hoʻololi paʻamau

Loaʻa i kēlā me kēia hoʻololi Sass i Bootstrap ka !defaulthae e ʻae iā ʻoe e hoʻopau i ka waiwai paʻamau o ka mea hoʻololi i kāu Sass ponoʻī me ka hoʻololi ʻole ʻana i ke code kumu o Bootstrap. E kope a paʻi i nā mea hoʻololi e like me ka mea e pono ai, hoʻololi i kā lākou mau waiwai, a wehe i ka !defaulthae. Inā ua hāʻawi mua ʻia kahi loli, a laila ʻaʻole ia e hāʻawi hou ʻia e nā koina paʻamau i Bootstrap.

E ʻike ʻoe i ka papa inoa piha o nā ʻano hoʻololi o Bootstrap ma scss/_variables.scss. Hoʻonohonoho ʻia kekahi mau mea hoʻololinull , ʻaʻole e hoʻopuka kēia mau mea hoʻololi i ka waiwai ke ʻole e hoʻopau ʻia i kāu hoʻonohonoho.

Pono e hele mai nā hoʻololi ʻokoʻa ma hope o ka lawe ʻia ʻana mai o kā mākou mau hana, akā ma mua o ke koena o ka lawe ʻana mai.

Eia kahi hiʻohiʻona e hoʻololi i ka background-colora colorno ka <body>wā e lawe mai ana a hōʻuluʻulu iā Bootstrap ma o 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

E hana hou e like me ka mea e pono ai no kēlā me kēia loli i Bootstrap, me nā koho honua ma lalo.

E hoʻomaka me Bootstrap ma o npm me kā mākou papahana hoʻomaka! E poʻo i ka waihona twbs/bootstrap-npm-starter template e ʻike ai pehea e kūkulu ai a hoʻopilikino iā Bootstrap i kāu papahana npm ponoʻī. Loaʻa i ka Sass compiler, Autoprefixer, Stylelint, PurgeCSS, a me Bootstrap Icons.

Nā palapala 'āina a me nā puka lou

Loaʻa iā Bootstrap kahi lima o nā palapala ʻāina Sass, nā hui waiwai koʻikoʻi e maʻalahi i ka hana ʻana i nā ʻohana CSS pili. Hoʻohana mākou i nā palapala ʻāina ʻo Sass no kā mākou kala, nā wahi haki, a me nā mea hou aku. E like me nā hoʻololi Sass, aia nā palapala ʻāina Sass āpau i ka !defaulthae a hiki ke hoʻopau ʻia a hoʻonui ʻia.

Hoʻohui ʻia kekahi o kā mākou mau palapala ʻāina Sass i nā palapala ʻāina ʻole. Hana ʻia kēia no ka ʻae ʻana i ka hoʻonui maʻalahi o kahi palapala ʻāina Sass i hāʻawi ʻia, akā hiki mai ke kumukūʻai o ka lawe ʻana i nā mea mai kahi palapala ʻāina i ʻoi aku ka paʻakikī.

Hoʻololi i ka palapala ʻāina

Ua wehewehe ʻia nā ʻokoʻa āpau ma ka $theme-colorspalapala ʻāina he mau ʻokoʻa kūʻokoʻa. No ka hoʻololi ʻana i kahi waihoʻoluʻu i kā mākou $theme-colorspalapala ʻāina, e hoʻohui i kēia i kāu faila Sass maʻamau:

$primary: #0074d9;
$danger: #ff4136;

Ma hope aku, ua hoʻonohonoho ʻia kēia mau ʻano ma ka palapala ʻāina o Bootstrap $theme-colors:

$theme-colors: (
  "primary": $primary,
  "danger": $danger
);

Hoʻohui i ka palapala ʻāina

Hoʻohui i nā kala hou iā $theme-colors, a i ʻole kekahi palapala ʻāina ʻē aʻe, ma ka hana ʻana i kahi palapala ʻāina Sass hou me kāu mau waiwai maʻamau a hoʻohui ʻia me ka palapala ʻāina kumu. I kēia hihia, e hana mākou i $custom-colorspalapala ʻāina hou a hoʻohui ʻia me $theme-colors.

// Create your own map
$custom-colors: (
  "custom-color": #900
);

// Merge the maps
$theme-colors: map-merge($theme-colors, $custom-colors);

Wehe ʻia mai ka palapala ʻāina

No ka wehe ʻana i nā kala mai $theme-colors, a i ʻole kekahi palapala ʻāina ʻē aʻe, e hoʻohana i ka map-remove. E makaʻala pono ʻoe e hoʻokomo $theme-colorsma waena o kā mākou mau koi ma hope o kona wehewehe ʻana i loko variablesa ma mua o kona hoʻohana ʻana 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

Pono nā kī

Manaʻo ʻo Bootstrap i ka loaʻa ʻana o kekahi mau kī kikoʻī i loko o nā palapala Sass i kā mākou hoʻohana ʻana a hoʻonui iā mākou iho. I kou hoʻopilikino ʻana i nā palapala ʻāina i hoʻokomo ʻia, hiki iā ʻoe ke loaʻa nā hewa kahi e hoʻohana ʻia ai kahi kī o ka palapala Sass kikoʻī.

No ka laʻana, hoʻohana mākou i ka primary, success, a me dangernā kī mai $theme-colorsno nā loulou, nā pihi, a me nā mokuʻāina. ʻAʻohe pilikia o ka hoʻololi ʻana i nā waiwai o kēia mau kī, akā ʻo ka wehe ʻana iā lākou hiki ke hoʻopilikia i ka hui ʻana o Sass. I kēia mau manawa, pono ʻoe e hoʻololi i ke code Sass e hoʻohana ana i kēlā mau waiwai.

Nā hana

Nā kala

Ma ka ʻaoʻao o nā palapala ʻāina Sass i loaʻa iā mākou, hiki ke hoʻohana ʻia nā kala kumumanaʻo e like me nā mea hoʻololi kūʻokoʻa, e like me $primary.

.custom-element {
  color: $gray-100;
  background-color: $dark;
}

Hiki iā ʻoe ke hoʻomāmā a ʻeleʻele paha i nā kala me nā Bootstrap a tint-color()me shade-color()nā hana. E hui pū kēia mau hana i nā kala me ka ʻeleʻele a i ʻole keʻokeʻo, ʻaʻole e like me Sass 'oiwi lighten()a me darken()nā hana e hoʻololi i ka māmā me ka nui paʻa, ʻaʻole pinepine i ka hopena i makemake ʻia.

// 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 ka hoʻomaʻamaʻa ʻana, e kāhea ʻoe i ka hana a hoʻokomo i nā ʻāpana kala a me ke kaumaha.

.custom-element {
  color: tint-color($primary, 10%);
}

.custom-element-2 {
  color: shade-color($danger, 30%);
}

ʻokoʻa kala

No ka hoʻokō ʻana i nā koi ʻokoʻa o ka Web Content Accessibility Guidelines (WCAG) , pono nā mea kākau e hāʻawi i ka liʻiliʻi o ka ʻokoʻa waihoʻoluʻu kikokikona o 4.5:1 a me ka liʻiliʻi ʻokoʻa kala ʻole kikokikona o 3:1 , me ka liʻiliʻi loa.

No ke kōkua ʻana i kēia, ua hoʻokomo mākou i ka color-contrasthana ma Bootstrap. Hoʻohana ia i ka WCAG contrast ratio algorithm no ka helu ʻana i nā paepae ʻokoʻa e pili ana i ka luminance pili i loko o kahi sRGBwaihoʻoluʻu e hoʻihoʻi ʻokoʻa i kahi kukui ( #fff), ʻeleʻele ( #212529) a ʻeleʻele paha ( #000) kala ʻokoʻa ma muli o ke kala kumu i kuhikuhi ʻia. He mea pono loa kēia hana no nā mixins a i ʻole nā puka lou kahi āu e hana ai i nā papa he nui.

No ka laʻana, e hoʻohua i nā kala kala mai kā mākou $theme-colorspalapala ʻāina:

@each $color, $value in $theme-colors {
  .swatch-#{$color} {
    color: color-contrast($value);
  }
}

Hiki ke hoʻohana ʻia no nā pono ʻokoʻa hoʻokahi:

.custom-element {
  color: color-contrast(#000); // returns `color: #fff`
}

Hiki iā ʻoe ke kuhikuhi i kahi waihoʻoluʻu kumu me kā mākou mau hana palapala kala:

.custom-element {
  color: color-contrast($dark); // returns `color: #fff`
}

Pakele SVG

Hoʻohana mākou i ka escape-svghana e pakele ai i ka <, >a me #nā huapalapala no nā kiʻi kāʻei kua SVG. I ka hoʻohana ʻana i ka escape-svghana, pono e ʻōlelo ʻia nā URI data.

Hoʻohui a unuhi i nā hana

Hoʻohana mākou i ka adda me subtractnā hana e kāʻei i ka calchana CSS. ʻO ke kumu nui o kēia mau hana, ʻo ia ka pale ʻana i nā hewa ke hoʻolilo ʻia kahi waiwai "unitless" 0i kahi calcʻōlelo. E hoʻihoʻi ka manaʻo like calc(10px - 0)i kahi hewa ma nā polokalamu kele pūnaewele a pau, ʻoiai he pololei ka makemakika.

ʻO ka laʻana kahi kūpono o ka calc:

$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);
}

ʻO ka laʻana inā ʻaʻohe kūpono ka helu:

$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);
}

Mea huikau

Loaʻa i kā mākou scss/mixins/papa kuhikuhi kahi ton o mixins e mana nā ʻāpana o Bootstrap a hiki ke hoʻohana ʻia ma kāu papahana ponoʻī.

Nā kala kala

Loaʻa kahi hui pōkole no ka prefers-color-schemenīnau media me ke kākoʻo no light, dark, a me nā ʻōkuhi kala maʻamau.

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