in English

Tanya ƒe Bootstrap

Trɔ asi le Bootstrap 4 ŋu kple míaƒe Sass tɔtrɔ yeye siwo wotu ɖe eme na xexeame katã ƒe atsyã ƒe tiatia hena tanya bɔbɔe kple akpa ƒe tɔtrɔ.

Kpɔkplɔyiɖeme

Le Bootstrap 3 me la, tanyawo ƒe akpa gãtɔ tso tɔtrɔwo ƒe tsɔtsɔ ɖe le LESS me, CSS si wowɔ ɖe ɖoɖo nu, kple tanya ƒe atsyã gbalẽvi si to vovo si míetsɔ de míaƒe distfaɛlwo me gbɔ. Ne ame aɖe dze agbagba vie la, ate ŋu atrɔ asi le Bootstrap 3 ƒe dzedzeme ŋu keŋkeŋ evɔ meka asi faɛl veviawo ŋu o. Bootstrap 4 naa mɔnu nyanyɛ aɖe, gake wòto vovo vie.

Fifia, wowɔa tanya to Sass ƒe tɔtrɔwo, Sass ƒe anyigbatatawo, kple CSS si wowɔ ɖe ɖoɖo nu dzi. Tanya ƒe atsyãgbalẽ si woɖo ɖi na ame aɖeke megali o; ke boŋ àte ŋu ana tanya si wotu ɖe eme la nate ŋu atsɔ gradients, shadows, kple bubuwo akpe ɖe eŋu.

Sass ƒe nyawo

Zã míaƒe dzɔtsoƒe Sass faɛlwo nàtsɔ awɔ tɔtrɔwo, anyigbatatawo, mixins, kple bubuwo ŋudɔ ne èle Sass ƒom ƒu to wò ŋutɔ wò nunɔamesiwo ƒe pɔmpi zazã me.

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 aɖo 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";
@import "../node_modules/bootstrap/scss/mixins";

// 4. Include any optional Bootstrap components as you like
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/code";
@import "../node_modules/bootstrap/scss/grid";

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, tɔtrɔwo, kple mixins ƒe tsɔtsɔ va 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:

@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

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

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:

$theme-colors: (
  "primary": #0074d9,
  "danger": #ff4136
);

Tsɔe kpe ɖe anyigbatata ŋu

Ne èdi be yeatsɔ amadede yeye akpe ɖe , ŋu $theme-colorsla, tsɔ safui yeyea kple asixɔxɔ kpee:

$theme-colors: (
  "custom-color": #900
);

Ð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àtsɔe ade míaƒe nudidiwo kple tiatiawɔblɔɖewo dome:

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

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

Bootstrap zãa Sass dɔwɔwɔ geɖewo, gake ƒuƒoƒo sue aɖe koe woateŋu awɔ dɔ le tanya gbadzaa me. Míetsɔ dɔwɔwɔ etɔ̃ de eme hena asixɔxɔwo xɔxɔ tso amadede ƒe anyigbatatawo me:

@function color($key: "blue") {
  @return map-get($colors, $key);
}

@function theme-color($key: "primary") {
  @return map-get($theme-colors, $key);
}

@function gray($key: "100") {
  @return map-get($grays, $key);
}

Esiawo na be nàte ŋu atia amadede ɖeka tso Sass ƒe anyigbatata me abe alesi nàzã amadede ƒe tɔtrɔ tso v3 me ene.

.custom-element {
  color: gray("100");
  background-color: theme-color("dark");
}

Dɔ bubu aɖe hã le mía si hena amadede ƒe seƒe$theme-colors aɖe koŋ xɔxɔ tso anyigbatataa dzi. Negative level values ​​ana amadedea nakɔ, gake level siwo kɔkɔ wu ado viviti.

@function theme-color-level($color-name: "primary", $level: 0) {
  $color: theme-color($color-name);
  $color-base: if($level > 0, #000, #fff);
  $level: abs($level);

  @return mix($color-base, $color, $level * $theme-color-interval);
}

Le nuwɔna me la, àyɔ dɔwɔwɔa eye nàto parameter eve me: amadede ƒe ŋkɔ tso $theme-colors(le kpɔɖeŋu me, gbãtɔ alo afɔku) kple xexlẽdzesi ƒe dzidzenu.

.custom-element {
  color: theme-color-level(primary, -10);
}

Woateŋu atsɔ dɔwɔwɔ bubuwo akpe ɖe eŋu le etsɔme alo wò ŋutɔ wò Sass si wowɔ ɖe ɖoɖo nu be nàwɔ level dɔwɔwɔwo na Sass ƒe anyigbatata bubuwo, alo gɔ̃ hã generic ɖeka ne èdi be yeanye nyagbɔgblɔ geɖe wu.

Amadede ƒe vovototo

Dɔ bubu aɖe si míetsɔ de Bootstrap mee nye amadede ƒe vovototodedeameme ƒe dɔwɔwɔ, color-yiq. Ezãa YIQ ƒe amadede ƒe teƒea tsɔ trɔa amadede si me kɔ ( #fff) alo viviti ( #111) si to vovo 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-yiq($value);
  }
}

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

.custom-element {
  color: color-yiq(#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-yiq(theme-color("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. Ele be woasi le ŋɔŋlɔdzesi siawo nu hafi woate ŋu aɖe megbenɔnɔmetataawo nyuie le IE me. 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);
}

Sass ƒe tiatiawɔblɔɖe

Trɔ asi le Bootstrap 4 ŋu kple míaƒe tɔtrɔ tɔxɛwo ƒe faɛl si wotu ɖe eme eye nàtrɔ xexeame katã ƒe CSS ƒe didiwo bɔbɔe kple $enable-*Sass tɔtrɔ yeyewo. Trɔ asi le tɔtrɔ aɖe ƒe asixɔxɔ ŋu eye nàgbugbɔ aƒo ƒu kple npm run testalesi wòhiã.

Àteŋu akpɔ tɔtrɔ siawo eye nàtrɔ asi le wo ŋu na xexeame katã ƒe tiatia veviwo le Bootstrap ƒe scss/_variables.scssfaɛl me.

Nusiwo trɔna Dzidzenuwo Nuɖᴐɖᴐ
$spacer 1rem(si woɖo ɖi), alo asixɔxɔ ɖesiaɖe > 0 Tsɔ spacer ƒe asixɔxɔ gbãtɔ si woatsɔ awɔ míaƒe spacer dɔwɔnuwo le ɖoɖowɔɖi me .
$enable-rounded true(si woɖo ɖi) alofalse Enaa border-radiusatsyã siwo woɖo ɖi do ŋgɔ la wɔa dɔ le akpa vovovowo dzi.
$enable-shadows truealo false(si woɖo ɖi) . Enaa atsyɔ̃ɖoɖo box-shadowƒe atsyã siwo woɖo ɖi do ŋgɔ la wɔa dɔ le akpa vovovowo dzi. Mekpɔa ŋusẽ ɖe box-shadows si wozãna na susu ƒe nɔnɔmewo dzi o.
$enable-gradients truealo false(si woɖo ɖi) . Enaa gradients siwo woɖo do ŋgɔ la wɔa dɔ to background-imageatsyãwo dzi le akpa vovovowo dzi.
$enable-transitions true(si woɖo ɖi) alofalse Enaa transitions siwo woɖo ɖi do ŋgɔ la wɔa dɔ le akpa vovovowo dzi.
$enable-prefers-reduced-motion-media-query true(si woɖo ɖi) alofalse Enables the prefers-reduced-motionmedia query , si tea nɔnɔmetata/trɔtrɔ aɖewo ɖe to le ezãlawo ƒe web-browser/dɔwɔɖoɖo ƒe didiwo nu.
$enable-hover-media-query truealo false(si woɖo ɖi) . Woɖe asi le eŋu
$enable-grid-classes true(si woɖo ɖi) alofalse Enaa CSS ƒe klasswo ƒe dzidzi na grid ɖoɖoa (le kpɔɖeŋu me, .container, .row, .col-md-1, kple bubuawo).
$enable-caret true(si woɖo ɖi) alofalse Enaa pseudo element caret wɔa dɔ le .dropdown-toggle.
$enable-pointer-cursor-for-buttons true(si woɖo ɖi) alofalse Tsɔ “asi” ƒe dzesi kpe ɖe abɔta ƒe akpa siwo menye nuwɔametɔwo o ŋu.
$enable-print-styles true(si woɖo ɖi) alofalse Enaa atsyãwo wɔa dɔ hena agbalẽtata nyuie wu.
$enable-responsive-font-sizes truealo false(si woɖo ɖi) . Enaa ŋɔŋlɔdzesiwo ƒe lolome siwo ɖoa nya ŋu la te ŋu wɔa dɔ .
$enable-validation-icons true(si woɖo ɖi) alofalse Enaa background-imagedzesiwo le nuŋɔŋlɔ ƒe nyawo me kple agbalẽvi tɔxɛ aɖewo ŋu na kpeɖodzi nɔnɔmewo.
$enable-deprecation-messages true(si woɖo ɖi) alofalse Ðoe ɖe falsebe nàɣla nuxlɔ̃amewo ne èle mixin kple dɔwɔwɔ siwo woɖo be woaɖe ɖa le v5.

Amadede

Wotu Bootstrap ƒe akpa vovovoawo kple dɔwɔnu geɖewo to amadede siwo kplɔ wo nɔewo ɖo siwo woɖe fia le Sass ƒe anyigbatata me dzi. Woateŋu atsɔ anyigbatata sia awɔ loop le Sass me be woawɔ se siwo kplɔ wo nɔewo ɖo kaba.

Amadedewo katã

Amadede siwo katã le Bootstrap 4 me, li abe Sass ƒe tɔtrɔwo kple Sass ƒe nɔnɔmetata le scss/_variables.scssfaɛl me ene. Woakeke esia ɖe enu le nu suesuesue siwo woaɖe ɖe go emegbe me be woatsɔ amadede bubuwo akpe ɖe eŋu, abe greyscale palette si míetsɔ de eme xoxo ene.

$blɔ #007bff ƒe ƒuƒoƒo
$indigo ƒe ƒuƒoƒo #6610f2 ƒe ƒuƒoƒo
$aɖabɛ dzĩ #6f42c1 ƒe ƒuƒoƒo
$pink ƒe ƒuƒoƒo #e83e8c ƒe ƒuƒoƒo
$dzẽ #dc3545 ƒe ƒuƒoƒo
$orange ƒe amadede #fd7e14 ƒe ƒuƒoƒo
$yibɔ #ffc107 ƒe ƒuƒoƒo
$amadede dzẽ #28a745 ƒe ƒuƒoƒo
$teal ƒe ƒuƒoƒo #20c997 ƒe ƒuƒoƒo
$cyan ƒe ƒuƒoƒo #17a2b8 ƒe ƒuƒoƒo

Ale si nàte ŋu azã esiawo le wò Sass me enye si:

// With variable
.alpha { color: $purple; }

// From the Sass map with our `color()` function
.beta { color: color("purple"); }

Amadede ƒe dɔwɔnu ƒe klasswo hã li na ɖoɖowɔwɔ colorkple background-color.

Le etsɔme la, míaɖoe be míana Sass ƒe anyigbatatawo kple tɔtrɔwo na amadede ɖesiaɖe ƒe vɔvɔliwo abe alesi míewɔe kple amadede ɣi siwo le ete ene.

Tanya ƒe amadedewo

Míezãa amadedewo katã ƒe akpa sue aɖe tsɔ wɔa amadede ƒe ƒuƒoƒo sue aɖe hena amadede ƒe ɖoɖowo wɔwɔ, si hã li abe Sass ƒe tɔtrɔwo kple Sass ƒe anyigbatata le Bootstrap ƒe scss/_variables.scssfaɛl me.

$gbãtɔ #007bff ƒe ƒuƒoƒo
$evelia ƒe akpa #6c757d ƒe ƒuƒoƒo
$dzidzedzekpɔkpɔ #28a745 ƒe ƒuƒoƒo
$afɔku #dc3545 ƒe ƒuƒoƒo
$nuxlɔ̃ame #ffc107 ƒe ƒuƒoƒo
$nyatakakawo #17a2b8 ƒe ƒuƒoƒo
$kekeli #f8f9fa ƒe ƒuƒoƒo
$viviti #343a40 ƒe ƒuƒoƒo

Gbe ɣiwo

Gbeɖiɖi ƒe tɔtrɔwo ƒe ƒuƒoƒo si keke ta kple Sass ƒe nɔnɔmetata le scss/_variables.scsshena amadede ɣi ƒe vɔvɔli siwo mewɔa tɔtrɔ o le wò dɔa katã me. De dzesii be esiawo nye “cool grays”, siwo dina be yewoawɔ gbeɖiɖi blɔ si menya kpɔna dzea sii bɔbɔe o, ke menye greys siwo medea akpa aɖeke dzi o.

$grey-100 ƒe ƒuƒoƒo #f8f9fa ƒe ƒuƒoƒo
$grey-200 ƒe ƒuƒoƒo #e9ecef ƒe ƒuƒoƒo
$grey-300 ƒe #dee2e6
$grey-400 ƒe #ced4da ƒe ƒuƒoƒo
$grey-500 ƒe #adb5bd ƒe ƒuƒoƒo
$grey-600 ƒe #6c757d ƒe ƒuƒoƒo
$grey-700 ƒe #495057 ƒe ƒuƒoƒo
$grey-800 ƒe #343a40 ƒe ƒuƒoƒo
$grey-900 ƒe #212529 ƒe ƒuƒoƒo

Le scss/_variables.scss, me la, àkpɔ Bootstrap ƒe amadede ƒe tɔtrɔwo kple Sass ƒe anyigbatata. $colorsSass ƒe anyigbatata ƒe kpɔɖeŋu aɖee nye esi :

$colors: (
  "blue": $blue,
  "indigo": $indigo,
  "purple": $purple,
  "pink": $pink,
  "red": $red,
  "orange": $orange,
  "yellow": $yellow,
  "green": $green,
  "teal": $teal,
  "cyan": $cyan,
  "white": $white,
  "gray": $gray-600,
  "gray-dark": $gray-800
) !default;

Tsɔ asixɔxɔwo kpee, ɖe wo ɖa, alo trɔ asi le wo ŋu le anyigbatataa me be nàtrɔ asi le alesi wozãa wo le akpa bubu geɖe me ŋu. Nublanuitɔe le ɣeyiɣi sia me la, menye akpa ɖesiaɖee zãa Sass ƒe anyigbatata sia o. Nu yeye siwo woawɔ le etsɔme adze agbagba be yewoawɔ esia wòanyo ɖe edzi. Vaseɖe ɣemaɣi la, wɔ ɖoɖo ɖe ${color}tɔtrɔawo kple Sass ƒe anyigbatata sia zazã ŋu.

Nusiwo le eme

Wotu Bootstrap ƒe akpa kple dɔwɔnu geɖewo kple @eachloop siwo gbugbɔna yia Sass ƒe anyigbatata dzi. Esia kpena ɖe ame ŋu vevietɔ na akpa aɖe ƒe tɔtrɔwo wɔwɔ to míaƒe $theme-colorskple tɔtrɔ siwo ɖoa nya ŋu wɔwɔ na breakpoint ɖesiaɖe. Ne èle Sass ƒe anyigbatata siawo trɔm eye nègbugbɔ ƒo wo nu ƒu la, àkpɔ wò tɔtrɔwo le ɖokuiwò si wòadze le loop siawo me.

Nusiwo trɔa asi le nu ŋu

Wotu Bootstrap ƒe akpa geɖewo kple base-modifier class mɔnu. Esia fia be atsyã ƒe akpa gãtɔ le gɔmeɖoanyi ƒe hatsotso aɖe me (le kpɔɖeŋu me, .btn) esime atsyã ƒe tɔtrɔwo le tɔtrɔ ƒe hatsotsowo me ko (le kpɔɖeŋu me, .btn-danger). Wotu tɔtrɔɖenu ƒe hatsotso siawo tso $theme-colorsanyigbatata dzi be woawɔ tɔtrɔ ɖe míaƒe tɔtrɔ ƒe hatsotsowo ƒe xexlẽme kple ŋkɔ ŋu.

Alesi míewɔa loop ɖe $theme-colorsanyigbatata dzi tsɔ wɔa tɔtrɔwo ɖe .alertakpaa kple míaƒe .bg-*megbe dɔwɔnuwo katã ŋu ƒe kpɔɖeŋu evee nye esi.

// Generate alert modifier classes
@each $color, $value in $theme-colors {
  .alert-#{$color} {
    @include alert-variant(theme-color-level($color, -10), theme-color-level($color, -9), theme-color-level($color, 6));
  }
}

// Generate `.bg-*` color utilities
@each $color, $value in $theme-colors {
  @include bg-variant('.bg-#{$color}', $value);
}

Nyaŋuɖoɖo

Sass loop siawo menye amadede ƒe anyigbatatawo ɖeɖeko o, nenema ke. Àte ŋu awɔ wò akpawo alo dɔwɔnuwo ƒe tɔtrɔ siwo ɖoa nya ŋu hã. Tsɔ kpɔɖeŋu míaƒe ŋuɖoɖo nuŋɔŋlɔ ƒe ɖoɖowɔwɔ dɔwɔnuwo afisi míetsakaa @eachloop na $grid-breakpointsSass anyigbatata kple media biabia de eme.

@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    .text#{$infix}-left   { text-align: left !important; }
    .text#{$infix}-right  { text-align: right !important; }
    .text#{$infix}-center { text-align: center !important; }
  }
}

Ne ehiã be nàtrɔ asi le wò $grid-breakpoints, wò tɔtrɔwo awɔ dɔ ɖe loop siwo katã gbugbɔna le anyigbatata ma dzi la dzi.

CSS ƒe tɔtrɔwo

Bootstrap 4 tsɔ CSS ƒe nɔnɔme tɔxɛwo (trɔtrɔwo) siwo ade blaeve vɔ eve de eƒe CSS si woƒo ƒu me. Esiawo naa mɔnukpɔkpɔ bɔbɔe be nàkpɔ asixɔxɔ siwo wozãna zi geɖe abe míaƒe tanya ƒe amadedewo, breakpoints, kple ŋɔŋlɔdzesi gbãtɔwo ƒe ƒuƒoƒo ne èle dɔ wɔm le wò web-browser ƒe Inspector, code sandbox, alo general prototyping me.

Trɔtrɔ siwo li

Trɔtrɔ siwo míetsɔ de eme lae nye esi (de dzesii be the :rootis required). Wole míaƒe _root.scssfaɛl la me.

:root {
  --blue: #007bff;
  --indigo: #6610f2;
  --purple: #6f42c1;
  --pink: #e83e8c;
  --red: #dc3545;
  --orange: #fd7e14;
  --yellow: #ffc107;
  --green: #28a745;
  --teal: #20c997;
  --cyan: #17a2b8;
  --white: #fff;
  --gray: #6c757d;
  --gray-dark: #343a40;
  --primary: #007bff;
  --secondary: #6c757d;
  --success: #28a745;
  --info: #17a2b8;
  --warning: #ffc107;
  --danger: #dc3545;
  --light: #f8f9fa;
  --dark: #343a40;
  --breakpoint-xs: 0;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

Kpɔɖeŋuwo

CSS ƒe tɔtrɔwo naa asitɔtrɔ le nɔnɔmewo ŋu abe Sass ƒe tɔtrɔwo ene, gake mehiã be woaƒo wo nu ƒu hafi atsɔ wo ana web-browser la o. Le kpɔɖeŋu me, afisia míele míaƒe axaa ƒe nuŋɔŋlɔ kple kadodo ƒe atsyãwo gbugbɔ ɖom kple CSS tɔtrɔwo.

body {
  font: 1rem/1.5 var(--font-family-sans-serif);
}
a {
  color: var(--blue);
}

Breakpoint ƒe tɔtrɔwo

Togbɔ be míetsɔ breakpoints de míaƒe CSS tɔtrɔwo me gbã (le kpɔɖeŋu me, --breakpoint-md), womedo alɔ esiawo le media biabiawo me o , gake woateŋu azã wo kokoko le sewo me le media biabiawo me. Brekpoint ƒe tɔtrɔ siawo gakpɔtɔ le CSS si woƒo ƒu me hena megbedede ƒe sɔsɔ ne wobu be woateŋu azã wo to JavaScript dzi. Srɔ̃ nu geɖe le spec la me .

Nusiwo womeda asi ɖe edzi o ƒe kpɔɖeŋu aɖee nye esi:

@media (min-width: var(--breakpoint-sm)) {
  ...
}

Eye nusiwo ŋu wodoa alɔe ƒe kpɔɖeŋu aɖee nye esi:

@media (min-width: 768px) {
  .custom-element {
    color: var(--primary);
  }
}