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.
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 luna pūʻolo, makemake ʻoe e hoʻonohonoho 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";
@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
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ākou bootstrap.scssfaila 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!default hae. 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 ʻano i ka waiwai ke ʻole lākou 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 nā lawe ʻana mai.
Eia kekahi laʻana e hoʻololi i ka background-colora colorno ka <body>wā e hoʻokomo 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/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.
Palapala 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 iā ia ma waena o kā mākou mau koi a me nā koho:
// 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
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
I mea e hoʻokō ai i nā kūlana hoʻohana WCAG 2.0 no ka ʻokoʻa kala , pono nā mea kākau e hāʻawi i ka ratio like ʻole o ka liʻiliʻi o 4.5:1 , me ka liʻiliʻi loa.
ʻO kahi hana ʻē aʻe a mākou e hoʻokomo ai i Bootstrap ʻo ia ka hana hoʻohālikelike kala, color-contrast. Hoʻohana ʻo ia i ka algorithm WCAG 2.0 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
}
}