Sass
Whakamahia a maatau punaa konae Sass hei whakamahi i nga taurangi, mapi, whakaurunga me nga mahi hei awhina i a koe ki te hanga tere me te whakarite i to kaupapa.
Whakamahia a maatau punaa konae Sass hei whakamahi i nga taurangi, mapi, whakauru, me etahi atu.
Hanganga kōnae
Ka taea, karohia te whakarereke i nga konae matua a Bootstrap. Mo Sass, ko te tikanga ko te hanga i taau ake pepa ahua e kawemai ana i a Bootstrap kia taea ai e koe te whakarereke me te whakaroa. Ki te whakaaro koe kei te whakamahi koe i te kaiwhakahaere kete penei i te npm, ka whiwhi koe i tetahi hanganga konae penei:
your-project/
├── scss
│ └── custom.scss
└── node_modules/
└── bootstrap
├── js
└── scss
Mena kua tikiakehia e koe o maatau konae puna me te kore e whakamahi i te kaiwhakahaere kete, ka hiahia koe ki te tatū-a-ringa i tetahi mea e rite ana ki tera hanganga, kia wehea nga konae puna a Bootstrap mai i a koe ake.
your-project/
├── scss
│ └── custom.scss
└── bootstrap/
├── js
└── scss
Kei te kawemai
I roto i to custom.scss, ka kawemai koe i nga konae Sass puna a Bootstrap. E rua nga whiringa: whakauruhia nga Bootstrap katoa, kowhiria ranei nga waahanga e hiahia ana koe. Ka akiaki matou i nga mea o muri, ahakoa kia mohio kei reira etahi whakaritenga me nga whakawhirinakitanga puta noa i o maatau waahanga. Me whakauru ano e koe etahi JavaScript mo a maatau mono.
// 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
I runga i taua tatūnga, ka taea e koe te timata ki te whakarereke i tetahi o nga taurangi Sass me nga mapi i roto i to custom.scss. Ka taea hoki te tiimata ki te taapiri i nga waahanga o Bootstrap i raro i te // Optionalwaahanga ka hiahiatia. Ka whakaaro matou kia whakamahia te kohinga kawemai katoa mai i ta maatau bootstrap.scsskonae hei timatanga.
Taunoa taurangi
Kei roto i ia taurangi Sass i Bootstrap te !defaulthaki ka taea e koe te whakakore i te uara taunoa o te taurangi i roto i to ake Sass me te kore e whakarereke i te waehere puna a Bootstrap. Tārua me te whakapiri i nga taurangi ka hiahiatia, whakarereke i o raatau uara, ka tango i te !defaulthaki. Mēnā kua tautapa kētia tētahi taurangi, karekau e tautapahia e ngā uara taunoa kei Bootstrap.
Ka kitea e koe te rarangi katoa o nga taurangi a Bootstrap i scss/_variables.scss. Kua tautuhia etahi taurangi ki te null, karekau enei taurangi e whakaputa i te taonga mena ka whakakorehia i to whirihoranga.
Me tae mai nga taapiri rereke i muri i te kawemai o a maatau mahi, engari i mua i era atu o nga kawemai.
Anei tetahi tauira ka huri i te background-colorme colorte mo te <body>wa e kawemai ana me te whakahiato Bootstrap ma te 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
Whakahokia ano e tika ana mo tetahi taurangi i Bootstrap, tae atu ki nga whiringa o te ao kei raro nei.
Mahere me nga koropiko
Kei roto i a Bootstrap etahi mapi Sass, nga takirua uara matua e ngawari ake ai te whakaputa whanau o te CSS e pa ana. Ka whakamahi matou i nga mapi Sass mo o matou tae, nga waahi wehenga matiti, me etahi atu. He rite tonu ki nga taurangi Sass, ko nga mapi Sass katoa kei roto te !defaulthaki ka taea te whakakore me te whakaroa.
Ko etahi o a maatau mapi Sass kua hanumi ki nga mapi kau ma te taunoa. Ka mahia tenei kia ngawari te horahanga o tetahi mapi Sass, engari he utu mo te tango i nga taonga mai i te mapi he uaua ake.
Whakakē mapi
Ko nga taurangi katoa o te $theme-colorsmapi kua tautuhia hei taurangi tuuturu. Hei whakarereke i tetahi tae o to maatau $theme-colorsmapi, taapirihia nga mea e whai ake nei ki to konae Sass ritenga:
$primary: #0074d9;
$danger: #ff4136;
I muri mai, ka whakatakotoria enei taurangi ki te $theme-colorsmapi a Bootstrap:
$theme-colors: (
"primary": $primary,
"danger": $danger
);
Tāpiri ki te mapi
Taapirihia nga tae hou ki $theme-colors, ki tetahi atu mapi ranei, ma te hanga mapi Sass hou me o uara ritenga me te hanumi ki te mapi taketake. I tenei take, ka hangaia he $custom-colorsmapi hou ka hanumi ki te $theme-colors.
// Create your own map
$custom-colors: (
"custom-color": #900
);
// Merge the maps
$theme-colors: map-merge($theme-colors, $custom-colors);
Tango mai i te mapi
Hei tango i nga tae mai i $theme-colors, i tetahi atu mapi ranei, whakamahia map-remove. Kia mohio koe me whakauru koe ki waenga i a maatau whakaritenga me nga whiringa:
// 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
Kī e hiahiatia ana
Ka mau a Bootstrap i etahi taviri motuhake i roto i nga mapi Sass i a maatau e whakamahi ana me te whakawhānui ake i enei. I a koe e whakarite ana i nga mapi kua whakauruhia, ka tupono pea koe ki nga hapa kei te whakamahia tetahi mapi mapi o Sass.
Hei tauira, ka whakamahia e matou te primary, success, me dangernga taviri mai i $theme-colorsnga hononga, patene, me nga ahua ahua. Ko te whakakapi i nga uara o enei taviri kia kore he take, engari ma te tango i aua taviri ka raru pea te kohinga Sass. I enei wa, me whakarereke e koe te waehere Sass e whakamahi ana i aua uara.
Nga Mahi
Nga Tae
I te taha o nga mapi Sass kei a matou, ka taea hoki te whakamahi i nga tae kaupapa hei taurangi tuuturu, penei i te $primary.
.custom-element {
color: $gray-100;
background-color: $dark;
}
Ka taea e koe te whakamarama, te whakapouri ranei i nga tae me nga Bootstrap tint-color()me shade-color()nga mahi. Ko enei mahinga ka whakakotahi i nga tae ki te pango, ma te ma ranei, kaore i rite ki te tangata whenua lighten()me darken()nga mahi a Sass ka huri i te maama ma te nui o te rahi, kaore e puta ki te painga e hiahiatia ana.
// 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 roto i te mahi, ka karanga koe i te mahi ka uru ki te tae me nga tawhā taumaha.
.custom-element {
color: tint-color($primary, 10%);
}
.custom-element-2 {
color: shade-color($danger, 30%);
}
He rereke te tae
Kia tutuki ai nga paerewa urunga WCAG 2.0 mo te rereke tae , me whakarato e nga kaituhi he tauwehenga rereke o te 4.5:1 neke atu , me te iti rawa o nga tuunga.
Ko tetahi atu mahi ka whakauruhia e matou ki Bootstrap ko te mahi rereke tae, color-contrast. Ka whakamahia e ia te WCAG 2.0 algorithm mo te tatau i nga paepae rereke i runga i te maramatanga whanaunga i roto i te sRGBmokowā tae ki te whakahoki aunoa i te tae marama ( #fff), pouri ( #212529) pango ranei ( #000) rereke i runga i te tae turanga kua tohua. He tino whaihua tenei mahi mo nga whakaranu, nga koropiko ranei kei te whakaputa koe i nga karaehe maha.
Hei tauira, ki te whakaputa i nga tohu tae mai i to maatau $theme-colorsmapi:
@each $color, $value in $theme-colors {
.swatch-#{$color} {
color: color-contrast($value);
}
}
Ka taea hoki te whakamahi mo nga hiahia rereke kotahi:
.custom-element {
color: color-contrast(#000); // returns `color: #fff`
}
Ka taea hoki e koe te tautuhi i tetahi tae turanga me o maatau mahinga mahere tae:
.custom-element {
color: color-contrast($dark); // returns `color: #fff`
}
Mawhiti SVG
Ka whakamahia e matou te escape-svgmahi ki te mawhiti i te <, >me #nga tohu mo nga whakaahua papamuri SVG. I te wa e whakamahi ana i te escape-svgmahi, me whakahuahia nga URI raraunga.
Tāpiri me te tango i nga mahi
Ka whakamahia e matou te addme nga subtractmahi ki te takai i te calcmahi CSS. 0Ko te kaupapa tuatahi o enei mahi ko te karo i nga hapa ka tukuna he uara "koe kore" ki roto ki te calcwhakapuaki. Ko nga korero penei calc(10px - 0)ka whakahoki he hapa ki nga kaitirotiro katoa, ahakoa he tika te pangarau.
Tauira kei te whai mana te taima:
$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);
}
Tauira kei te muhu te taima:
$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);
}
Whakaranu
He maha nga whakauru o ta maatau scss/mixins/raarangi whakauru e kaha ana nga waahanga o Bootstrap ka taea hoki te whakamahi puta noa i to kaupapa ake.
Kaupapa tae
Kei te watea he ranunga poto mo te prefers-color-schemepatai pāpāho me te tautoko mo te light, dark, me nga kaupapa tae ritenga.
@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
}
}