Source

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 didiwo hena tanya bɔbɔe kple akpa ƒe tɔtrɔwo.

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ɔ. Le míaƒe xɔtutu me la míedzi Sass ƒe ƒuƒoƒo ƒe pɛpɛpɛ ɖe edzi va ɖo 6 (le gɔmedzedzea me la, enye 5) be míaxe mɔ ɖe kuxi siwo le browser ƒe ƒuƒoƒo ŋu nu.

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 yeaɖo nane si sɔ kple ɖoɖo ma kple asi, 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

@import "../node_modules/bootstrap/scss/bootstrap";

// Custom.scss
// Option B: Include parts of Bootstrap

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

// Optional
@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 4 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 womagbugbɔ aɖoe to asixɔxɔ gbãtɔ siwo le Bootstrap me la 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.

Tɔtrɔwo ƒe ʋuʋu le Sass faɛl ɖeka me ateŋu ava do ŋgɔ na tɔtrɔ gbãtɔawo alo le wo megbe. Ke hã, ne èle asi trɔm le Sass faɛlwo katã ŋu la, ele be wò asiɖeɖe le wo ŋu nava hafi nàxɔ Bootstrap ƒe Sass faɛlwo.

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:

// Your variable overrides
$body-bg: #000;
$body-color: #111;

// Bootstrap and its default variables
@import "../node_modules/bootstrap/scss/bootstrap";

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

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ɔ na Sass ƒe anyigbatata si wona la keke ɖ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 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 code 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.

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) alo`false`	Enaa `border-radius`atsyã siwo woɖo ɖi do ŋgɔ la wɔa dɔ le akpa vovovowo dzi.
`$enable-shadows`	`true`alo `false`(si woɖo ɖi) .	Enaa `box-shadow`atsyã siwo woɖo ɖi do ŋgɔ la wɔa dɔ le akpa vovovowo dzi.
`$enable-gradients`	`true`alo `false`(si woɖo ɖi) .	Enaa gradients siwo woɖo do ŋgɔ la wɔa dɔ to `background-image`atsyãwo dzi le akpa vovovowo dzi.
`$enable-transitions`	`true`(si woɖo ɖi) alo`false`	Enaa `transition`s 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) alo`false`	Enables the `prefers-reduced-motion`media 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`	`true`alo `false`(si woɖo ɖi) .	Woɖe asi le eŋu
`$enable-grid-classes`	`true`(si woɖo ɖi) alo`false`	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) alo`false`	Enaa pseudo element caret wɔa dɔ le `.dropdown-toggle`.
`$enable-pointer-cursor-for-buttons`	`true`(si woɖo ɖi) alo`false`	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) alo`false`	Enaa atsyãwo wɔa dɔ hena agbalẽtata nyuie wu.
`$enable-responsive-font-sizes`	`true`alo `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) alo`false`	Enaa `background-image`dzesiwo le nuŋɔŋlɔ ƒe nyawo me kple nuŋlɔɖi tɔxɛ aɖewo me na kpeɖodzi nɔnɔmewo.
`$enable-deprecation-messages`	`true`alo `false`(si woɖo ɖi) .	Ðoe ɖe `true`be wòaɖe nuxlɔ̃amewo afia 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.

Bluᴐ

Indigo ƒe ŋkɔ

Dzẽ

Aŋuti

Aŋgbaɖiɖi

Gbemu

Teal ƒe ƒuƒoƒo

Cyan ƒe ŋkɔ

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.

Gɔmedzeƒe

Sekɛndrisuku

Dzidzedzekpᴐkpᴐ

Ŋɔdzi

Kpɔnyuiedodo

Nyatakaka

Kekeli

Nyrɔ

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.

100 ƒe xexlẽme

200 ƒe xexlẽme

300 ƒe xexlẽme

400 ƒe xexlẽme

500 ƒe xexlẽme

600 ƒe xexlẽme

700 ƒe xexlẽme

800 ƒe xexlẽme

900 ƒe xexlẽme

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 (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 na .alertakpaa kple míaƒe .bg-*megbe dɔwɔnuwo katã ƒ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.

Nusiwo trɔna 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", 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);
  }
}