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";
@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
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 // Optional
waahanga ka hiahiatia. Ka whakaaro matou kia whakamahia te kohinga kawemai katoa mai i ta maatau bootstrap.scss
konae hei timatanga.
Taunoa taurangi
Kei roto i ia taurangi Sass i Bootstrap te !default
haki 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 !default
haki. 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-color
me color
te 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";
@import "../node_modules/bootstrap/scss/root";
// Optional Bootstrap components here
@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 !default
haki 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-colors
mapi kua tautuhia hei taurangi tuuturu. Hei whakarereke i tetahi tae o to maatau $theme-colors
mapi, 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-colors
mapi 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-colors
mapi 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";
@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
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 danger
nga taviri mai i $theme-colors
nga 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 sRGB
mokowā 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-colors
mapi:
@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-svg
mahi ki te mawhiti i te <
, >
me #
nga tohu mo nga whakaahua papamuri SVG. I te wa e whakamahi ana i te escape-svg
mahi, me whakahuahia nga URI raraunga.
Tāpiri me te tango i nga mahi
Ka whakamahia e matou te add
me nga subtract
mahi ki te takai i te calc
mahi CSS. 0
Ko te kaupapa tuatahi o enei mahi ko te karo i nga hapa ka tukuna he uara "koe kore" ki roto ki te calc
whakapuaki. 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-scheme
patai 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
}
}