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.

I tenei wharangi

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 hanga 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";

// 4. Include any default map overrides here

// 5. Include remainder of required parts
@import "../node_modules/bootstrap/scss/maps";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";

// 6. Optionally include any other parts 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";

// 7. Optionally include utilities API last to generate classes based on the Sass map in `_utilities.scss`
@import "../node_modules/bootstrap/scss/utilities/api";

// 8. 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/maps";
@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.

Me timata me Bootstrap ma te npm me ta maatau kaupapa timata! Haere ki te whare taonga tauira twbs/bootstrap-npm-starter kia kite me pehea te hanga me te whakarite i a Bootstrap i roto i to ake kaupapa npm. Kei roto ko Sass compiler, Autoprefixer, Stylelint, PurgeCSS, me Bootstrap Ata.

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 $theme-colorswaenga i a maatau whakaritenga i muri tonu i tana whakamaaramatanga ki roto variables, i mua i tana whakamahinga ki maps:

// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";

$theme-colors: map-remove($theme-colors, "info", "light", "dark");

@import "../node_modules/bootstrap/scss/maps";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";

// 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 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

Hei whakatutuki i nga whakaritenga rerekee nga Aratohu Whakaaetanga Ihirangi Tukutuku (WCAG) , me whakarato nga kaituhi i te iti rawa o te rereke tae o te kuputuhi o te 4.5:1 me te iti rawa o te rereke tae kore-kuputuhi o te 3:1 , me te iti rawa o nga rereke.

Hei awhina i tenei, i whakauruhia e matou te color-contrastmahi ki Bootstrap. Ka whakamahia e ia te WCAG ratio contrast 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) mangu 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
  }
}