Sass
Tumia faili zetu asili za Sass ili kunufaika na vigeu, ramani, michanganyiko na vitendakazi ili kukusaidia kujenga haraka na kubinafsisha mradi wako.
Tumia chanzo chetu cha faili za Sass ili kufaidika na vigeu, ramani, mchanganyiko na zaidi.
Muundo wa faili
Inapowezekana, epuka kurekebisha faili za msingi za Bootstrap. Kwa Sass, hiyo inamaanisha kuunda laha yako mwenyewe ya mtindo inayoingiza Bootstrap ili uweze kuirekebisha na kuipanua. Kwa kudhani unatumia meneja wa kifurushi kama npm, utakuwa na muundo wa faili ambao unaonekana kama hii:
your-project/
├── scss
│ └── custom.scss
└── node_modules/
└── bootstrap
├── js
└── scss
Ikiwa umepakua faili zetu asili na hutumii kidhibiti kifurushi, utataka kusanidi wewe mwenyewe kitu sawa na muundo huo, ukitenganisha faili za chanzo za Bootstrap na zako.
your-project/
├── scss
│ └── custom.scss
└── bootstrap/
├── js
└── scss
Inaingiza
Katika custom.scss
, utaleta faili za Sass chanzo cha Bootstrap. Una chaguo mbili: ni pamoja na Bootstrap yote, au chagua sehemu unazohitaji. Tunahimiza hii ya mwisho, ingawa fahamu kuwa kuna mahitaji na tegemezi katika vipengele vyetu. Pia utahitaji kujumuisha JavaScript kwa programu-jalizi zetu.
// 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
Usanidi huo ukiwa umekamilika, unaweza kuanza kurekebisha vigeuzo vyovyote vya Sass na ramani katika custom.scss
. Unaweza pia kuanza kuongeza sehemu za Bootstrap chini ya // Optional
sehemu kama inahitajika. Tunapendekeza utumie mrundikano kamili wa kuingiza kutoka kwenye bootstrap.scss
faili yetu kama sehemu yako ya kuanzia.
Chaguo-msingi zinazobadilika
Kila kigezo cha Sass katika Bootstrap kinajumuisha !default
bendera inayokuruhusu kubatilisha thamani chaguo-msingi ya kigezo katika Sass yako bila kurekebisha msimbo wa chanzo wa Bootstrap. Nakili na ubandike vigeu vinavyohitajika, rekebisha thamani zao, na uondoe !default
bendera. Ikiwa kibadilishaji tayari kimepewa, basi hakitakabidhiwa tena na maadili chaguo-msingi katika Bootstrap.
Utapata orodha kamili ya anuwai za Bootstrap katika scss/_variables.scss
. Vigezo vingine vimewekwa kuwa null
, vigeu hivi havitoi mali isipokuwa vimebatilishwa katika usanidi wako.
Ubatilishaji unaobadilika lazima uje baada ya utendakazi wetu kuingizwa, lakini kabla ya uagizaji wengine.
Hapa kuna mfano ambao unabadilisha background-color
na color
kwa <body>
wakati wa kuingiza na kuunda Bootstrap kupitia 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
Rudia inavyohitajika kwa utofauti wowote katika Bootstrap, ikijumuisha chaguzi za kimataifa zilizo hapa chini.
Ramani na vitanzi
Bootstrap inajumuisha ramani chache za Sass, jozi muhimu za thamani ambazo hurahisisha kutengeneza familia za CSS zinazohusiana. Tunatumia ramani za Sass kwa rangi zetu, vituo vya kuvunja gridi na zaidi. Kama vile vigeu vya Sass, ramani zote za Sass zinajumuisha !default
bendera na zinaweza kubatilishwa na kupanuliwa.
Baadhi ya ramani zetu za Sass zimeunganishwa kuwa tupu kwa chaguomsingi. Hii inafanywa ili kuruhusu upanuzi rahisi wa ramani fulani ya Sass, lakini inakuja kwa gharama ya kufanya kuondoa vitu kutoka kwa ramani kuwa vigumu zaidi.
Rekebisha ramani
Vigezo vyote kwenye $theme-colors
ramani vinafafanuliwa kama vigeu vilivyojitegemea. Ili kurekebisha rangi iliyopo kwenye $theme-colors
ramani yetu, ongeza yafuatayo kwenye faili yako maalum ya Sass:
$primary: #0074d9;
$danger: #ff4136;
Baadaye, anuwai hizi zimewekwa kwenye $theme-colors
ramani ya Bootstrap:
$theme-colors: (
"primary": $primary,
"danger": $danger
);
Ongeza kwenye ramani
Ongeza rangi mpya kwa $theme-colors
, au ramani nyingine yoyote, kwa kuunda ramani mpya ya Sass na thamani zako maalum na kuiunganisha na ramani asili. Katika hali hii, tutaunda $custom-colors
ramani mpya na kuiunganisha na $theme-colors
.
// Create your own map
$custom-colors: (
"custom-color": #900
);
// Merge the maps
$theme-colors: map-merge($theme-colors, $custom-colors);
Ondoa kwenye ramani
Ili kuondoa rangi kutoka $theme-colors
, au ramani nyingine yoyote, tumia map-remove
. Fahamu ni lazima uiweke kati ya mahitaji yetu na chaguo:
// 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
Vifunguo vinavyohitajika
Bootstrap huchukulia kuwepo kwa baadhi ya funguo mahususi ndani ya ramani za Sass kama tulivyotumia na kuzipanua sisi wenyewe. Unapoweka mapendeleo kwenye ramani zilizojumuishwa, unaweza kukutana na hitilafu ambapo ufunguo mahususi wa ramani ya Sass unatumika.
Kwa mfano, tunatumia primary
, success
, na danger
vitufe kutoka $theme-colors
kwa viungo, vitufe, na hali za fomu. Kubadilisha thamani za funguo hizi hakupaswi kuwasilisha masuala yoyote, lakini kuziondoa kunaweza kusababisha masuala ya ujumuishaji wa Sass. Katika matukio haya, utahitaji kurekebisha msimbo wa Sass unaotumia maadili hayo.
Kazi
Rangi
Kando ya ramani za Sass tulizo nazo, rangi za mandhari pia zinaweza kutumika kama vigeu vinavyojitegemea, kama $primary
.
.custom-element {
color: $gray-100;
background-color: $dark;
}
Unaweza kuangaza au kufanya rangi nyeusi na Bootstrap tint-color()
na shade-color()
vitendaji. Vitendaji hivi vitachanganya rangi na nyeusi au nyeupe, tofauti na asili ya Sass lighten()
na darken()
vitendaji ambavyo vitabadilisha wepesi kwa kiwango kisichobadilika, ambacho mara nyingi hakileti athari inayotaka.
// 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));
}
Kwa mazoezi, ungeita kazi na kupitisha katika rangi na vigezo vya uzito.
.custom-element {
color: tint-color($primary, 10%);
}
.custom-element-2 {
color: shade-color($danger, 30%);
}
Tofauti ya rangi
Ili kufikia viwango vya ufikivu vya WCAG 2.0 vya utofautishaji wa rangi , ni lazima waandishi watoe uwiano wa utofautishaji wa angalau 4.5:1 , isipokuwa wachache sana.
Chaguo za ziada tunazojumuisha kwenye Bootstrap ni chaguo za kukokotoa za utofautishaji wa rangi, color-contrast
. Inatumia algoriti ya WCAG 2.0 kwa kukokotoa viwango vya utofautishaji kulingana na mwanga kiasi katika nafasi ya sRGB
rangi ili kurudisha kiotomatiki mwanga ( #fff
), giza ( #212529
) au nyeusi ( #000
) rangi ya utofautishaji kulingana na rangi ya msingi iliyobainishwa. Chaguo hili la kukokotoa ni muhimu sana kwa michanganyiko au vitanzi ambapo unazalisha madarasa mengi.
Kwa mfano, kutengeneza alama za rangi kutoka kwa $theme-colors
ramani yetu:
@each $color, $value in $theme-colors {
.swatch-#{$color} {
color: color-contrast($value);
}
}
Inaweza pia kutumika kwa mahitaji ya tofauti ya mara moja:
.custom-element {
color: color-contrast(#000); // returns `color: #fff`
}
Unaweza pia kubainisha rangi ya msingi na vipengele vyetu vya ramani ya rangi:
.custom-element {
color: color-contrast($dark); // returns `color: #fff`
}
Escape SVG
Tunatumia chaguo la escape-svg
kukokotoa ili kuepuka <
, >
na #
vibambo vya picha za mandharinyuma za SVG. Wakati wa kutumia chaguo za escape-svg
kukokotoa, URI za data lazima zinukuliwe.
Ongeza na Ondoa vitendaji
Tunatumia add
na subtract
vitendakazi kufunga chaguo za kukokotoa za CSS calc
. Madhumuni ya kimsingi ya chaguo hizi za kukokotoa ni kuepuka makosa wakati thamani ya "unit" 0
inapitishwa kwenye calc
usemi. Maneno kama calc(10px - 0)
hayo yatarudisha hitilafu katika vivinjari vyote, licha ya kuwa sahihi kihisabati.
Mfano ambapo hesabu ni halali:
$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);
}
Mfano ambapo hesabu ni batili:
$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);
}
Mchanganyiko
Saraka yetu scss/mixins/
ina tani ya michanganyiko inayotumia sehemu za Bootstrap na inaweza pia kutumika katika mradi wako mwenyewe.
Mipango ya rangi
Mchanganyiko mfupi wa prefers-color-scheme
hoja ya media unapatikana kwa usaidizi wa light
, dark
, na miundo maalum ya rangi.
@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
}
}