Sass ƒe nyawo

Zã míaƒe dzɔtsoƒe Sass faɛlwo nàtsɔ awɔ tɔtrɔwo, anyigbatatawo, mixins, kple dɔwɔwɔwo ŋudɔ atsɔ akpe ɖe ŋuwò nàtu kabakaba eye nàtrɔ asi le wò dɔa ŋu.

Le axa sia dzi

Zã míaƒe dzɔtsoƒe Sass faɛlwo nàtsɔ awɔ tɔtrɔwo, anyigbatatawo, mixins, kple bubuwo ŋudɔ.

Faɛl ƒe ɖoɖowɔwɔ

Ɣesiaɣi si wòanya wɔ la, ƒo asa na asitɔtrɔ le Bootstrap ƒe faɛl veviwo ŋu. Le Sass gome la, ema fia be nàwɔ wò ŋutɔ wò atsyãgbalẽ si xɔa Bootstrap ale be nàte ŋu atrɔ asi le eŋu ahakekee ɖe enu. Ne míetsɔe be èle package manager abe npm ene zãm la, àkpɔ faɛl ƒe ɖoɖo si le abe esia ene:

your-project/
├── scss
│   └── custom.scss
└── node_modules/
    └── bootstrap
        ├── js
        └── scss

Ne èɖe míaƒe dzɔtsoƒe faɛlwo eye mèle package manager zãm o la, àdi be yeatsɔ asi awɔ nane si sɔ kple ɖoɖo ma, si ana Bootstrap ƒe dzɔtsoƒe faɛlwo nato vovo tso tɔwò gbɔ.

your-project/
├── scss
│   └── custom.scss
└── bootstrap/
    ├── js
    └── scss

Nusiwo wotsɔ tso duta vɛ

Le wò custom.scss, àxɔ Bootstrap ƒe dzɔtsoƒe Sass faɛlwo. Tiatia eve le asiwò: tsɔ Bootstrap la katã de eme, alo nàtia akpa siwo nèhiã. Míele dzi dem ƒo na mamlɛtɔa, togbɔ be nyae be nudidi aɖewo kple nusiwo dzi woanɔ te ɖo le míaƒe akpawo katã me hã. Ahiã hã be nàde JavaScript aɖewo eme na míaƒe plugins.

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

Ne ɖoɖo ma le teƒea la, àte ŋu adze asitɔtrɔ le Sass ƒe tɔtrɔwo kple anyigbatata siwo le wò custom.scss. Àteŋu adze Bootstrap ƒe akpa aɖewo tsɔtsɔ kpee hã gɔme le // Optionalakpaa te ne ehiã. Míeɖo aɖaŋu be nàzã import stack bliboa tso míaƒe bootstrap.scssfaɛl me abe wò gɔmedzedze ene.

Trɔtrɔ ƒe nɔnɔmewo

Sass ƒe tɔtrɔ ɖesiaɖe le Bootstrap me la de !defaultaflaga si ɖe mɔ na wò be nàɖe asi le tɔtrɔ ƒe asixɔxɔ gbãtɔ ŋu le wò ŋutɔ wò Sass me evɔ màtrɔ asi le Bootstrap ƒe dzɔtsoƒe ƒe nuŋɔŋlɔ ŋu o. Kpɔ tɔtrɔwo ƒe kɔpi eye nàde wo eme alesi wòhiã, trɔ asi le woƒe asixɔxɔwo ŋu, eye nàɖe !defaultaflagaa ɖa. Ne wotsɔ tɔtrɔ aɖe de asi na ame xoxo la, ekema womagagbugbɔe ade asi na to asixɔxɔ gbãtɔ siwo le Bootstrap me dzi o.

Àkpɔ Bootstrap ƒe tɔtrɔwo ƒe xexlẽdzesi bliboa le scss/_variables.scss. Woɖo tɔtrɔ aɖewo ɖe null, tɔtrɔ siawo meɖea nɔnɔme la doa goe o negbe ɖe woɖe wo ɖa le wò ɖoɖowɔɖi me hafi.

Ele be tɔtrɔwo ƒe tsɔtsɔme nava le míaƒe dɔwɔwɔwo ƒe tsɔtsɔ va vɔ megbe, gake do ŋgɔ na xɔxlɔ̃ mamlɛawo.

Kpɔɖeŋu aɖe si trɔa background-colorkple colorna <body>ne wole Bootstrap xɔm hele eƒom ƒu to npm dzi lae nye esi:

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

Gbugbɔ gblɔ alesi wòhiã na tɔtrɔ ɖesiaɖe le Bootstrap me, si me xexeame katã ƒe tiatia siwo le ete hã le.

Dze egɔme kple Bootstrap to npm dzi kple míaƒe gɔmedzedzedɔa! Ta yi twbs/bootstrap-npm-starter template repository be nàkpɔ alesi nàtu Bootstrap eye nàtrɔ asi le eŋu le wò ŋutɔ wò npm dɔa me. Sass nuƒoƒoƒula, Autoprefixer, Stylelint, PurgeCSS, kple Bootstrap Dzesiwo le eme.

Anyigbatatawo kple loopwo

Bootstrap la lɔ Sass anyigbatata ʋee aɖewo ɖe eme, asixɔxɔ vevi eve siwo nana wònɔa bɔbɔe be woawɔ CSS siwo do ƒome kplii ƒe ƒomewo. Míezãa Sass ƒe anyigbatatawo na míaƒe amadedewo, grid breakpoints, kple bubuwo. Abe Sass ƒe tɔtrɔwo ene la, Sass ƒe anyigbatatawo katã me !defaultaflaga la le eye woateŋu axe mɔ ɖe wo nu ahakeke wo ɖe enu.

Woƒoa míaƒe Sass anyigbatata aɖewo nu ƒu ɖe ƒuƒluwo me le gɔmedzedzea me. Wowɔa esia be woaɖe mɔ be woakeke Sass ƒe anyigbatata aɖe ɖe enu bɔbɔe, gake eva le ga si woatsɔ ana nuwo ɖeɖe le anyigbatata dzi nasesẽ vie ta.

Trɔ asi le anyigbatata ŋu

Woɖe tɔtrɔ siwo katã le $theme-colorsanyigbatataa me gɔme be wonye tɔtrɔ siwo le wo ɖokui si. Ne èdi be yeatrɔ asi le amadede aɖe si li xoxo le míaƒe $theme-colorsanyigbatata dzi ŋu la, tsɔ nusiwo gbɔna kpe ɖe wò Sass faɛl si nèwɔ ɖe ɖoɖo nu ŋu:

$primary: #0074d9;
$danger: #ff4136;

Emegbe la, woɖoa tɔtrɔ siawo ɖe Bootstrap ƒe $theme-colorsanyigbatata dzi:

$theme-colors: (
  "primary": $primary,
  "danger": $danger
);

Tsɔe kpe ɖe anyigbatata ŋu

Tsɔ amadede yeyewo kpe ɖe $theme-colors, alo anyigbatata bubu ɖesiaɖe ŋu, to Sass anyigbatata yeye wɔwɔ kple wò asixɔxɔ tɔxɛwo me eye nàtsɔe aƒo ƒu kple anyigbatata gbãtɔa. Le nɔnɔme sia me la, míawɔ $custom-colorsanyigbatata yeye eye míatsɔe aƒo ƒu kple $theme-colors.

// Create your own map
$custom-colors: (
  "custom-color": #900
);

// Merge the maps
$theme-colors: map-merge($theme-colors, $custom-colors);

Ðee ɖa le anyigbatata dzi

Ne èdi be yeaɖe amadedewo ɖa le $theme-colors, alo anyigbatata bubu ɖesiaɖe dzi la, zã map-remove. Nyae be ele be nàde $theme-colorsnu míaƒe nudidiwo dome le eƒe gɔmesese megbe teti le variableskple do ŋgɔ na eƒe zazã le 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

Safui siwo hiã

Bootstrap tsɔe be safui tɔxɛ aɖewo le Sass ƒe anyigbatatawo me abe alesi míezãe eye mía ŋutɔwo míekeke esiawo ɖe enu ene. Ne èle anyigbatata siwo le eme la trɔm la, àte ŋu ado go vodadawo le afisi wole Sass ƒe anyigbatata aɖe koŋ ƒe safui zãm le.

Le kpɔɖeŋu me, míezãa primary, success, kple dangersafui siwo tso $theme-colorshena kadodowo, abɔtawo, kple nuŋlɔɖi ƒe nɔnɔmewo. Mele be safui siawo ƒe asixɔxɔwo ɖɔliɖɔli nahe nya aɖeke vɛ o, gake wo ɖeɖeɖa ateŋu ahe Sass ƒe nuƒoƒoƒu ƒe kuxiwo vɛ. Le nɔnɔme siawo me la, ahiã be nàtrɔ asi le Sass ƒe kɔda si wɔa asixɔxɔ mawo ŋudɔ la ŋu.

Dɔwɔwɔwo

Amadedewo

Le Sass anyigbatata siwo le mía si la xa la, woate ŋu azã tanya ƒe amadedewo hã abe tɔtrɔ siwo le wo ɖokui si ene, abe $primary.

.custom-element {
  color: $gray-100;
  background-color: $dark;
}

Àte ŋu ana amadedewo nakɔ alo ado viviti kple Bootstrap ƒe tint-color()kple shade-color()dɔwɔwɔwo. Dɔwɔwɔ siawo atsaka amadedewo kple yevu alo ɣi, to vovo na Sass ƒe dzɔdzɔme lighten()kple darken()dɔwɔwɔ siwo atrɔ kekeli la le agbɔsɔsɔ aɖe si woɖo ɖi me, si zi geɖe la, mekplɔa ame yia ŋusẽkpɔɖeamedzi si nèdi gbɔ o.

// 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));
}

Le nuwɔna me la, àyɔ dɔwɔwɔa eye nàto amadede kple kpekpeme ƒe nɔnɔmewo me.

.custom-element {
  color: tint-color($primary, 10%);
}

.custom-element-2 {
  color: shade-color($danger, 30%);
}

Amadede ƒe vovototo

Be woate ŋu aɖo Nyatakakadzraɖoƒea ƒe Nyatakakawo Ŋuti Mɔfiamewo (WCAG) ƒe vovototodedeameme ƒe nudidiwo gbɔ la, ele be agbalẽŋlɔlawo nana nuŋɔŋlɔ ƒe amadede ƒe vovototo suetɔ kekeake si nye 4.5:1 kple vovototo suetɔ kekeake si menye nuŋɔŋlɔ o ƒe amadede ƒe vovototo si nye 3:1 , negbe ʋɛ aɖewo ko koe mele eme o.

Be míakpe ɖe esia ŋu la, míetsɔ color-contrastdɔwɔwɔa de Bootstrap me. Ezãa WCAG ƒe vovototo ƒe xexlẽme ƒe akɔntabubu hena vovototo ƒe dzidzenuwo ƒe akɔntabubu si wotu ɖe keklẽ si sɔ gbɔ le sRGBamadede ƒe teƒe aɖe dzi be wòatrɔ kekeli ( #fff), viviti ( #212529) alo yevu ( #000) ƒe vovototo ƒe amadede le eɖokui si si wotu ɖe gɔmeɖoanyi ƒe amadede si woɖo dzi. Dɔwɔwɔ sia ɖea vi ŋutɔ na mixins alo loops afisi nèle klass geɖewo wɔm le.

Le kpɔɖeŋu me, be nàwɔ amadede ƒe nɔnɔmetatawo tso míaƒe $theme-colorsanyigbatata dzi la:

@each $color, $value in $theme-colors {
  .swatch-#{$color} {
    color: color-contrast($value);
  }
}

Woate ŋu azãe hã na vovototodedeameme ƒe hiahiã siwo hiã zi ɖeka:

.custom-element {
  color: color-contrast(#000); // returns `color: #fff`
}

Àte ŋu agblɔ gɔmeɖoanyi ƒe amadede hã kple míaƒe amadede ƒe nɔnɔmetata ƒe dɔwɔwɔwo:

.custom-element {
  color: color-contrast($dark); // returns `color: #fff`
}

Si le SVG nu

Míezãa escape-svgdɔwɔwɔa tsɔ sina le <, >kple #ŋɔŋlɔdzesiwo na SVG megbe nɔnɔmetatawo. Ne èle escape-svgdɔwɔwɔa zãm la, ele be woayɔ nyatakakawo ƒe URIwo.

Dɔwɔwɔwo Tsɔ kpe ɖe eŋu kple esiwo woɖe ɖa

Míezãa addkple subtractdɔwɔwɔwo tsɔ blaa CSS calcdɔwɔwɔa. Taɖodzinu vevitɔ si le dɔwɔwɔ siawo ŋue nye be woaƒo asa na vodadawo ne wotsɔ 0asixɔxɔ si “maɖe ɖeka o” de calcnyagbɔgblɔ aɖe me. Nyagbɔgblɔwo abe calc(10px - 0)atrɔ vodada le web-browserwo katã me, togbɔ be wosɔ le akɔntabubu nu hã.

Kpɔɖeŋu si me calc la sɔ le:

$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);
}

Kpɔɖeŋu si me calc la mele eteƒe o:

$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);
}

Nusiwo wotsɔ tsakae

Míaƒe scss/mixins/nyatakakadzraɖoƒea le mixins tɔn ɖeka si naa ŋusẽ Bootstrap ƒe akpa aɖewo eye woate ŋu azãe hã le wò ŋutɔ wò dɔa katã me.

Amadedewo ƒe ɖoɖowo

Kpuie ƒe mixin na prefers-color-schememedia biabia la li kple kpekpeɖeŋu na light, dark, kple amadede ƒe ɖoɖo tɔxɛwo.

@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
  }
}