Sass
Gamitin ang aming source na Sass file para samantalahin ang mga variable, mapa, mixin, at function para matulungan kang bumuo ng mas mabilis at i-customize ang iyong proyekto.
Gamitin ang aming source na Sass file para samantalahin ang mga variable, mapa, mixin, at higit pa.
Istraktura ng file
Hangga't maaari, iwasang baguhin ang mga pangunahing file ng Bootstrap. Para sa Sass, nangangahulugan iyon ng paggawa ng sarili mong stylesheet na nag-i-import ng Bootstrap para mabago at ma-extend mo ito. Ipagpalagay na gumagamit ka ng manager ng package tulad ng npm, magkakaroon ka ng istraktura ng file na ganito ang hitsura:
your-project/
├── scss
│ └── custom.scss
└── node_modules/
└── bootstrap
├── js
└── scss
Kung na-download mo ang aming mga source file at hindi gumagamit ng package manager, gugustuhin mong manu-manong mag-setup ng isang bagay na katulad ng structure na iyon, na pinapanatili ang mga source file ng Bootstrap na hiwalay sa iyong sarili.
your-project/
├── scss
│ └── custom.scss
└── bootstrap/
├── js
└── scss
Ini-import
Sa iyong custom.scss
, mag-i-import ka ng pinagmulang Sass file ng Bootstrap. Mayroon kang dalawang pagpipilian: isama ang lahat ng Bootstrap, o piliin ang mga bahagi na kailangan mo. Hinihikayat namin ang huli, kahit na magkaroon ng kamalayan na mayroong ilang mga kinakailangan at dependency sa aming mga bahagi. Kakailanganin mo ring magsama ng ilang JavaScript para sa aming mga plugin.
// 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
Kapag nakalagay ang setup na iyon, maaari mong simulan na baguhin ang alinman sa mga variable at mapa ng Sass sa iyong custom.scss
. Maaari ka ring magsimulang magdagdag ng mga bahagi ng Bootstrap sa ilalim ng // Optional
seksyon kung kinakailangan. Iminumungkahi namin ang paggamit ng buong stack ng pag-import mula sa aming bootstrap.scss
file bilang iyong panimulang punto.
Mga default ng variable
Kasama sa bawat Sass variable sa Bootstrap ang !default
flag na nagbibigay-daan sa iyong i-override ang default na value ng variable sa sarili mong Sass nang hindi binabago ang source code ng Bootstrap. Kopyahin at i-paste ang mga variable kung kinakailangan, baguhin ang kanilang mga halaga, at alisin ang !default
flag. Kung naitalaga na ang isang variable, hindi na ito muling itatalaga ng mga default na value sa Bootstrap.
Makikita mo ang kumpletong listahan ng mga variable ng Bootstrap sa scss/_variables.scss
. Nakatakda ang ilang variable sa null
, hindi ilalabas ng mga variable na ito ang property maliban na lang kung ma-override ang mga ito sa iyong configuration.
Ang mga override ng variable ay dapat na dumating pagkatapos ma-import ang aming mga function, ngunit bago ang iba pang mga pag-import.
Narito ang isang halimbawa na nagbabago sa background-color
at color
para sa <body>
kapag ini-import at kino-compile ang Bootstrap sa pamamagitan ng 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
Ulitin kung kinakailangan para sa anumang variable sa Bootstrap, kasama ang mga pandaigdigang opsyon sa ibaba.
Mga mapa at mga loop
Kasama sa Bootstrap ang ilang mga mapa ng Sass, mga pares ng pangunahing halaga na nagpapadali sa pagbuo ng mga pamilya ng nauugnay na CSS. Gumagamit kami ng mga mapa ng Sass para sa aming mga kulay, mga breakpoint ng grid, at higit pa. Katulad ng mga variable ng Sass, kasama sa lahat ng mapa ng Sass ang !default
flag at maaaring i-override at palawigin.
Ang ilan sa aming mga mapa ng Sass ay pinagsama sa mga walang laman bilang default. Ginagawa ito upang bigyang-daan ang madaling pagpapalawak ng isang ibinigay na mapa ng Sass, ngunit ito ay may halaga na gawing mas mahirap ang pag- alis ng mga item mula sa isang mapa.
Baguhin ang mapa
Ang lahat ng mga variable sa $theme-colors
mapa ay tinukoy bilang mga standalone na variable. Upang baguhin ang isang umiiral na kulay sa aming $theme-colors
mapa, idagdag ang sumusunod sa iyong custom na Sass file:
$primary: #0074d9;
$danger: #ff4136;
Sa paglaon, ang mga variable na ito ay nakatakda sa $theme-colors
mapa ng Bootstrap:
$theme-colors: (
"primary": $primary,
"danger": $danger
);
Idagdag sa mapa
Magdagdag ng mga bagong kulay sa $theme-colors
, o anumang iba pang mapa, sa pamamagitan ng paglikha ng bagong mapa ng Sass gamit ang iyong mga custom na halaga at pagsasama nito sa orihinal na mapa. Sa kasong ito, gagawa kami ng bagong $custom-colors
mapa at pagsasamahin ito sa $theme-colors
.
// Create your own map
$custom-colors: (
"custom-color": #900
);
// Merge the maps
$theme-colors: map-merge($theme-colors, $custom-colors);
Alisin sa mapa
Upang alisin ang mga kulay mula sa $theme-colors
, o anumang iba pang mapa, gamitin ang map-remove
. Magkaroon ng kamalayan na dapat mong ipasok ito sa pagitan ng aming mga kinakailangan at mga opsyon:
// 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
Mga kinakailangang susi
Ipinapalagay ng Bootstrap ang pagkakaroon ng ilang partikular na susi sa loob ng mga mapa ng Sass habang kami mismo ang gumagamit at nagpapalawak ng mga ito. Habang kino-customize mo ang mga kasamang mapa, maaari kang makatagpo ng mga error kung saan ginagamit ang isang partikular na key ng Sass map.
Halimbawa, ginagamit namin ang primary
, success
, at mga danger
key mula $theme-colors
sa para sa mga link, button, at form states. Ang pagpapalit sa mga value ng mga key na ito ay hindi dapat magpakita ng mga isyu, ngunit ang pag-alis sa mga ito ay maaaring magdulot ng mga isyu sa Sass compilation. Sa mga pagkakataong ito, kakailanganin mong baguhin ang Sass code na gumagamit ng mga value na iyon.
Mga pag-andar
Mga kulay
Sa tabi ng mga mapa ng Sass na mayroon kami, maaari ding gamitin ang mga kulay ng tema bilang mga standalone na variable, tulad ng $primary
.
.custom-element {
color: $gray-100;
background-color: $dark;
}
Maaari kang magpagaan o magpadilim ng mga kulay gamit ang Bootstrap's tint-color()
at mga shade-color()
function. Ang mga function na ito ay maghahalo ng mga kulay sa itim o puti, hindi tulad ng Sass' native lighten()
at mga darken()
function na magpapabago sa liwanag ng isang nakapirming halaga, na kadalasan ay hindi humahantong sa nais na epekto.
// 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));
}
Sa pagsasagawa, tatawagan mo ang function at ipasa ang mga parameter ng kulay at timbang.
.custom-element {
color: tint-color($primary, 10%);
}
.custom-element-2 {
color: shade-color($danger, 30%);
}
Contrast ng kulay
Upang matugunan ang mga pamantayan ng accessibility ng WCAG 2.0 para sa contrast ng kulay , ang mga may-akda ay dapat magbigay ng contrast ratio na hindi bababa sa 4.5:1 , na may napakakaunting mga exception.
Ang isang karagdagang function na kasama namin sa Bootstrap ay ang color contrast function, color-contrast
. Ginagamit nito ang WCAG 2.0 algorithm para sa pagkalkula ng mga contrast threshold batay sa relatibong luminance sa isang sRGB
colorspace upang awtomatikong magbalik ng liwanag ( #fff
), madilim ( #212529
) o itim ( #000
) contrast na kulay batay sa tinukoy na kulay ng base. Ang function na ito ay lalong kapaki-pakinabang para sa mga mixin o loop kung saan ka bumubuo ng maraming klase.
Halimbawa, upang makabuo ng mga color swatch mula sa aming $theme-colors
mapa:
@each $color, $value in $theme-colors {
.swatch-#{$color} {
color: color-contrast($value);
}
}
Maaari rin itong gamitin para sa isang beses na pangangailangan sa kaibahan:
.custom-element {
color: color-contrast(#000); // returns `color: #fff`
}
Maaari ka ring tumukoy ng base na kulay sa aming mga function ng color map:
.custom-element {
color: color-contrast($dark); // returns `color: #fff`
}
Tumakas sa SVG
Ginagamit namin ang escape-svg
function upang makatakas sa <
, >
at mga #
character para sa mga larawan sa background ng SVG. Kapag ginagamit ang escape-svg
function, dapat na quote ang mga URI ng data.
Magdagdag at Magbawas ng mga function
Ginagamit namin ang add
at subtract
function para i-wrap ang CSS calc
function. Ang pangunahing layunin ng mga function na ito ay upang maiwasan ang mga error kapag ang isang "walang yunit" 0
na halaga ay ipinasa sa isang calc
expression. Ang mga expression na tulad calc(10px - 0)
ay magbabalik ng error sa lahat ng browser, sa kabila ng pagiging tama sa matematika.
Halimbawa kung saan wasto ang 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);
}
Halimbawa kung saan hindi wasto ang 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
Ang aming scss/mixins/
direktoryo ay may isang toneladang mixin na nagpapagana sa mga bahagi ng Bootstrap at maaari ding gamitin sa iyong sariling proyekto.
Mga scheme ng kulay
Available ang shorthand mixin para sa prefers-color-scheme
media query na may suporta para sa light
, dark
, at mga custom na color scheme.
@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
}
}