Yutiliti API fɔ di wan dɛn we de wok

Di yutiliti API na wan Sass-based tul fɔ jenarayz yutiliti klas dɛn.

Na dis pej

Bootstrap yutiliti dɛn de jenarayz wit wi yutiliti API ɛn dɛn kin yuz am fɔ chenj ɔ ɛkstɛnd wi difɔlt sɛt fɔ yutiliti klas dɛn via Sass. Wi yutiliti API na bays pan wan siriɔs Sass map ɛn fɛnshɔn fɔ jenarayz famili dɛn fɔ klas wit difrɛn opshɔn dɛn. If yu no sabi Sass maps, rid op pan di ofishal Sass docs fo stat.

Di $utilitiesmap gɛt ɔl wi yutiliti dɛn ɛn leta dɛn kin jɔyn am wit yu kɔstɔm $utilitiesmap, if i de. Di yutiliti map gɛt wan list we gɛt ki fɔ yutiliti grup dɛn we de aksept dɛn opshɔn ya:

Ɔda tin	Kayn	Difɔlt valyu	Tɔk bɔt
`property`	Fɔ du	– 2019.	Nem fɔ di prɔpati, dis kin bi string ɔ wan arenjmɛnt fɔ string dɛn (ɛgz., ɔrizɔntal pad ɔ margin).
`values`	Fɔ du	– 2019.	Lista fɔ valyu dɛn, ɔ map if yu nɔ want di klas nem fɔ bi di sem wit di valyu. If `null`dɛn yuz am as map ki, dɛn nɔ de kɔmpilayt am.
`class`	Pɔsibul	nɔ gɛt wan valyu	Nem fɔ di klas we dɛn dɔn jenarayz. If dɛn nɔ gi am ɛn `property`na arenjmɛnt fɔ string dɛn, `class`go difɔlt to di fɔs ɛlimɛnt na di `property`arenjmɛnt.
`css-var`	Pɔsibul	`false`	Bulin fɔ jenarayz CSS vɛriɔbul dɛn instead ɔf CSS lɔ dɛn.
`local-vars`	Pɔsibul	nɔ gɛt wan valyu	Map fɔ lokal CSS vɛriɔbul dɛn fɔ jenarayz in ad pan di CSS lɔ dɛn.
`state`	Pɔsibul	nɔ gɛt wan valyu	Lista fɔ pseudo-klas vayriɔnt dɛn (ɛgz., `:hover`ɔ `:focus`) fɔ jenarayz.
`responsive`	Pɔsibul	`false`	Bulin we de sho if dɛn fɔ jenarayz klas dɛn we de ansa.
`rfs`	Pɔsibul	`false`	Boolean fɔ ɛnabul fluid riskel wit RFS .
`print`	Pɔsibul	`false`	Bulin we de sho if dɛn nid fɔ mek print klas dɛn.
`rtl`	Pɔsibul	`true`	Bulin we de sho if yutiliti fɔ de na RTL.

API bin ɛksplen

Ɔl di yutiliti vɛriɔbul dɛn ad to di $utilitiesvɛriɔbul insay wi _utilities.scssstaylshit. Ɛni grup fɔ yutiliti dɛn luk sɔntin lɛk dis:

$utilities: (
  "opacity": (
    property: opacity,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
);

We de autput dɛn tin ya:

.opacity-0 { opacity: 0; }
.opacity-25 { opacity: .25; }
.opacity-50 { opacity: .5; }
.opacity-75 { opacity: .75; }
.opacity-100 { opacity: 1; }

Land

Di propertyki we dɛn nid fɔ sɛt fɔ ɛni yutiliti, ɛn i fɔ gɛt valid CSS prɔpati. Dis prɔpati de yuz insay di yutiliti we dɛn dɔn jenarayz in lɔ sɛt. We dɛn classnɔ put di ki, i kin bi bak di difɔlt klas nem. Tink bɔt di text-decorationyutiliti:

$utilities: (
  "text-decoration": (
    property: text-decoration,
    values: none underline line-through
  )
);

Di tin we de kɔmɔt: .

.text-decoration-none { text-decoration: none !important; }
.text-decoration-underline { text-decoration: underline !important; }
.text-decoration-line-through { text-decoration: line-through !important; }

Di valyu dɛn we pɔsin gɛt

Yuz di valueski fɔ sho us valyu fɔ di wan dɛn we dɛn dɔn spɛsifa propertyfɔ yuz na di klas nem ɛn lɔ dɛn we dɛn dɔn jenarayz. I kin bi wan list ɔ map (sɛt insay di yutiliti dɛn ɔ insay wan Sass vɛriɔbul).

As wan list, lɛk wit text-decorationyutiliti dɛn :

values: none underline line-through

As map, lɛk wit opacityyutiliti dɛn :

values: (
  0: 0,
  25: .25,
  50: .5,
  75: .75,
  100: 1,
)

As wan Sass variebul we de set di list ɔ map, lɛk na wi positionyutiliti dɛn :

values: $position-values

Klas

Yuz di classopshɔn fɔ chenj di klas prɛfiks we dɛn yuz na di CSS we dɛn dɔn kɔmpilayt. Fɔ ɛgzampul, fɔ chenj frɔm .opacity-*to .o-*:

$utilities: (
  "opacity": (
    property: opacity,
    class: o,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
);

Di tin we de kɔmɔt: .

.o-0 { opacity: 0 !important; }
.o-25 { opacity: .25 !important; }
.o-50 { opacity: .5 !important; }
.o-75 { opacity: .75 !important; }
.o-100 { opacity: 1 !important; }

CSS vayriɔbul yutiliti dɛn

Sɛt di css-varbulin opshɔn to trueɛn di API go jenarayz lokal CSS vɛriɔbul fɔ di sɛlɛktɔ we dɛn gi instead ɔf di ɔspitul property: valuelɔ dɛn. Tink bɔt wi .text-opacity-*yutiliti dɛn:

$utilities: (
  "text-opacity": (
    css-var: true,
    class: text-opacity,
    values: (
      25: .25,
      50: .5,
      75: .75,
      100: 1
    )
  ),
);

Di tin we de kɔmɔt: .

.text-opacity-25 { --bs-text-opacity: .25; }
.text-opacity-50 { --bs-text-opacity: .5; }
.text-opacity-75 { --bs-text-opacity: .75; }
.text-opacity-100 { --bs-text-opacity: 1; }

Lokal CSS vɛriɔbul dɛn

Yuz di local-varsopshɔn fɔ spɛsifa wan Sass map we go jenarayz lokal CSS vɛriɔbul dɛn insay di yutiliti klas in rul sɛt. Duya mɛmba se i kin nid ɔda wok fɔ kɔnsum dɛn lokal CSS vɛriɔbul dɛn de na di CSS lɔ dɛn we dɛn dɔn jenarayz. Fɔ ɛgzampul, tink bɔt wi .bg-*yutiliti dɛn:

$utilities: (
  "background-color": (
    property: background-color,
    class: bg,
    local-vars: (
      "bg-opacity": 1
    ),
    values: map-merge(
      $utilities-bg-colors,
      (
        "transparent": transparent
      )
    )
  )
);

Di tin we de kɔmɔt: .

.bg-primary {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity)) !important;
}

Stet dɛn

Yuz di stateopshɔn fɔ jenarayz pseudo-klas difrɛns dɛn. Ɛgzampul pseudo-klas dɛn na :hoverɛn :focus. We dɛn gi wan list fɔ stet dɛn, dɛn kin mek klas nem fɔ da lay lay klas de. Fɔ ɛgzampul, fɔ chenj opasiti pan hova, ad state: hoverɛn yu go gɛt .opacity-hover:hoverinsay yu kɔmpilayt CSS.

Nid bɔku pseudo-klas dɛn? Yuz wan list we gɛt spɛshal say dɛn fɔ di stet dɛn: state: hover focus.

$utilities: (
  "opacity": (
    property: opacity,
    class: opacity,
    state: hover,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
);

Di tin we de kɔmɔt: .

.opacity-0-hover:hover { opacity: 0 !important; }
.opacity-25-hover:hover { opacity: .25 !important; }
.opacity-50-hover:hover { opacity: .5 !important; }
.opacity-75-hover:hover { opacity: .75 !important; }
.opacity-100-hover:hover { opacity: 1 !important; }

Fɔ ansa

Ad di responsiveboolean fɔ jenarayz rispɔnsiv yutiliti dɛn (ɛgz., .opacity-md-25) akɔs ɔl di brekpɔynt dɛn .

$utilities: (
  "opacity": (
    property: opacity,
    responsive: true,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
);

Di tin we de kɔmɔt: .

.opacity-0 { opacity: 0 !important; }
.opacity-25 { opacity: .25 !important; }
.opacity-50 { opacity: .5 !important; }
.opacity-75 { opacity: .75 !important; }
.opacity-100 { opacity: 1 !important; }

@media (min-width: 576px) {
  .opacity-sm-0 { opacity: 0 !important; }
  .opacity-sm-25 { opacity: .25 !important; }
  .opacity-sm-50 { opacity: .5 !important; }
  .opacity-sm-75 { opacity: .75 !important; }
  .opacity-sm-100 { opacity: 1 !important; }
}

@media (min-width: 768px) {
  .opacity-md-0 { opacity: 0 !important; }
  .opacity-md-25 { opacity: .25 !important; }
  .opacity-md-50 { opacity: .5 !important; }
  .opacity-md-75 { opacity: .75 !important; }
  .opacity-md-100 { opacity: 1 !important; }
}

@media (min-width: 992px) {
  .opacity-lg-0 { opacity: 0 !important; }
  .opacity-lg-25 { opacity: .25 !important; }
  .opacity-lg-50 { opacity: .5 !important; }
  .opacity-lg-75 { opacity: .75 !important; }
  .opacity-lg-100 { opacity: 1 !important; }
}

@media (min-width: 1200px) {
  .opacity-xl-0 { opacity: 0 !important; }
  .opacity-xl-25 { opacity: .25 !important; }
  .opacity-xl-50 { opacity: .5 !important; }
  .opacity-xl-75 { opacity: .75 !important; }
  .opacity-xl-100 { opacity: 1 !important; }
}

@media (min-width: 1400px) {
  .opacity-xxl-0 { opacity: 0 !important; }
  .opacity-xxl-25 { opacity: .25 !important; }
  .opacity-xxl-50 { opacity: .5 !important; }
  .opacity-xxl-75 { opacity: .75 !important; }
  .opacity-xxl-100 { opacity: 1 !important; }
}

Print we dɛn kin print

If yu ɛnabul di printopshɔn, i go mek yu gɛt yutiliti klas dɛn bak fɔ print, we dɛn jɔs de yuz insay di @media print { ... }midia kwɛstyɔn.

$utilities: (
  "opacity": (
    property: opacity,
    print: true,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
);

Di tin we de kɔmɔt: .

.opacity-0 { opacity: 0 !important; }
.opacity-25 { opacity: .25 !important; }
.opacity-50 { opacity: .5 !important; }
.opacity-75 { opacity: .75 !important; }
.opacity-100 { opacity: 1 !important; }

@media print {
  .opacity-print-0 { opacity: 0 !important; }
  .opacity-print-25 { opacity: .25 !important; }
  .opacity-print-50 { opacity: .5 !important; }
  .opacity-print-75 { opacity: .75 !important; }
  .opacity-print-100 { opacity: 1 !important; }
}

Impɔtant tin

Ɔl di yutiliti dɛn we di API dɔn mek inklud !importantfɔ mek shɔ se dɛn ɔvalayz kɔmpɔnɛnt ɛn modifya klas dɛn lɛk aw dɛn bin want fɔ du am. Yu kin chenj dis sɛtin global wan wit di $enable-important-utilitiesvɛriɔbul (difɔlt to true).

We yu de yuz di API

Naw we yu dɔn sabi aw di yutiliti dɛn API de wok, lan aw fɔ ad yu yon kɔstɔm klas dɛn ɛn chenj wi difɔlt yutiliti dɛn.

Ɔvarayd yutiliti dɛn

Ɔvalayz di yutiliti dɛn we dɔn de bay we yu yuz di sem ki. Fɔ ɛgzampul, if yu want ɔda rispɔnsiv ɔvaflɔ yutiliti klas dɛn, yu kin du dis:

$utilities: (
  "overflow": (
    responsive: true,
    property: overflow,
    values: visible hidden scroll auto,
  ),
);

Ad yutiliti dɛn

Yu kin ad nyu yutiliti dɛn to di difɔlt $utilitiesmap wit wan map-merge. Mek shɔ se wi Sass fayl dɛn we wi nid ɛn _utilities.scssdɛn import dɛn fɔs, dɔn yuz di map-mergefɔ ad yu ɔda yutiliti dɛn. Fɔ ɛgzampul, na dis na aw fɔ ad wan rispɔnsiv cursoryutiliti wit tri valyu dɛn.

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/utilities";

$utilities: map-merge(
  $utilities,
  (
    "cursor": (
      property: cursor,
      class: cursor,
      responsive: true,
      values: auto pointer grab,
    )
  )
);

Modify di yutiliti dɛn

Modify di yutiliti dɛn we dɔn de na di difɔlt $utilitiesmap wit map-getɛn map-mergefɛnshɔn dɛn. Insay di ɛgzampul we de dɔŋ ya, wi de ad wan ɔda valyu to di widthyutiliti dɛn. Start wit wan initial map-mergeɛn afta dat sho us yutiliti yu want fɔ chenj. Frɔm de, tek di "width"map we dɛn dɔn nɛst wit map-getfɔ akses ɛn chenj di yutiliti in opshɔn ɛn valyu dɛn.

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/utilities";

$utilities: map-merge(
  $utilities,
  (
    "width": map-merge(
      map-get($utilities, "width"),
      (
        values: map-merge(
          map-get(map-get($utilities, "width"), "values"),
          (10: 10%),
        ),
      ),
    ),
  )
);

Enable fɔ ansa

Yu kin ɛnabul rispɔnsiv klas dɛn fɔ wan sɛt fɔ yutiliti dɛn we dɔn de we nɔ de ansa naw bay difɔlt. Fɔ ɛgzampul, fɔ mek di borderklas dɛn ansa:

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/utilities";

$utilities: map-merge(
  $utilities, (
    "border": map-merge(
      map-get($utilities, "border"),
      ( responsive: true ),
    ),
  )
);

Dis go naw jεnarεt rεspכns vεryushכn dεm fכ .borderεn .border-0fכ εvri brekpכynt. Yu CSS we yu dɔn mek go tan lɛk dis:

.border { ... }
.border-0 { ... }

@media (min-width: 576px) {
  .border-sm { ... }
  .border-sm-0 { ... }
}

@media (min-width: 768px) {
  .border-md { ... }
  .border-md-0 { ... }
}

@media (min-width: 992px) {
  .border-lg { ... }
  .border-lg-0 { ... }
}

@media (min-width: 1200px) {
  .border-xl { ... }
  .border-xl-0 { ... }
}

@media (min-width: 1400px) {
  .border-xxl { ... }
  .border-xxl-0 { ... }
}

Rinem di yutiliti dɛn

Misin v4 yutiliti, ɔ yus to ɔda nem kɔnvɛnshɔn? Di yutiliti dɛn API kin yuz fɔ ɔvalayz di rizɔlt classfɔ wan yutiliti we dɛn gi—fɔ ɛgzampul, fɔ chenj di nem fɔ .ms-*yutiliti dɛn to oldish .ml-*:

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/utilities";

$utilities: map-merge(
  $utilities, (
    "margin-start": map-merge(
      map-get($utilities, "margin-start"),
      ( class: ml ),
    ),
  )
);

Rimov di yutiliti dɛn

Rimov ɛni wan pan di difɔlt yutiliti dɛn bay we yu sɛt di grup ki to null. Fɔ ɛgzampul, fɔ pul ɔl wi widthyutiliti dɛn, mek wan $utilities map-mergeɛn ad "width": nullinsay.

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/utilities";

$utilities: map-merge(
  $utilities,
  (
    "width": null
  )
);

Rimov yutiliti na RTL

Sɔm ed kes dɛn kin mek RTL stayl at , lɛk layn brek insay Arabik. So yutiliti dɛn kin drɔp frɔm RTL ɔtput bay we dɛn sɛt di rtlopshɔn to false:

$utilities: (
  "word-wrap": (
    property: word-wrap word-break,
    class: text,
    values: (break: break-word),
    rtl: false
  ),
);

Di tin we de kɔmɔt: .

/* rtl:begin:remove */
.text-break {
  word-wrap: break-word !important;
  word-break: break-word !important;
}
/* rtl:end:remove */

Dis nɔ de autput ɛnitin na RTL, tank to di RTLCSS removekɔntrol dairekt .