API no ka pono

ʻO ka API pono he mea hana Sass e hana i nā papa pono.

Ma kēia ʻaoʻao

Hoʻokumu ʻia nā pono hana Bootstrap me kā mākou API pono a hiki ke hoʻohana ʻia e hoʻololi a hoʻonui i kā mākou papa hana paʻamau ma o Sass. Hoʻokumu ʻia kā mākou mea pono API ma ke ʻano o nā palapala Sass a me nā hana no ka hana ʻana i nā ʻohana o nā papa me nā koho like ʻole. Inā ʻaʻole ʻoe kamaʻāina i nā palapala ʻāina Sass, e heluhelu i nā palapala Sass mana e hoʻomaka ai.

Loaʻa i ka $utilitiespalapala ʻāina kā mākou mau pono āpau a hoʻohui ʻia me kāu $utilitiespalapala maʻamau, inā aia. Aia ka palapala 'āina i kahi papa inoa o nā hui pono e ʻae i kēia mau koho:

Koho	ʻAno	Waiwai paʻamau	wehewehe
`property`	Pono	–	ʻO ka inoa o ka waiwai, hiki kēia i ke kaula a i ʻole ke ʻano o nā kaula (e laʻa, nā padding horizontal a i ʻole nā palena).
`values`	Pono	–	Ka papa inoa o nā waiwai, a i ʻole ka palapala ʻāina inā ʻaʻole ʻoe makemake e like ka inoa o ka papa me ka waiwai. Inā `null`hoʻohana ʻia e like me ke kī palapala ʻāina, ʻaʻole ia i hōʻuluʻulu ʻia.
`class`	Koho	null	Ka inoa o ka papa i hanaia. Inā ʻaʻole i hāʻawi ʻia a `property`he ʻano o nā kaula, `class`e paʻa i ka mea mua o ka `property`array.
`css-var`	Koho	`false`	ʻO Boolean e hana i nā mea hoʻololi CSS ma kahi o nā lula CSS.
`local-vars`	Koho	null	Palapala ʻāina o nā ʻano CSS kūloko e hoʻohua i ka hoʻohui i nā lula CSS.
`state`	Koho	null	Papa inoa o nā ʻano ʻano pseudo-class (e laʻa, a i `:hover`ʻole `:focus`) e hana.
`responsive`	Koho	`false`	Hōʻike ʻo Boolean inā pono e hana ʻia nā papa pane.
`rfs`	Koho	`false`	ʻO Boolean e hiki ai ke hoʻihoʻi hou i ka wai me RFS .
`print`	Koho	`false`	Hōʻike ʻo Boolean inā pono e hana ʻia nā papa paʻi.
`rtl`	Koho	`true`	Hōʻike ʻo Boolean inā pono e mālama ʻia ka pono ma RTL.

Ua wehewehe ʻo API

Hoʻohui ʻia nā mea hoʻololi pono āpau i ka $utilitiesloli i loko o kā mākou _utilities.scssstylesheet. ʻO kēlā me kēia hui o nā pono e like me kēia:

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

ʻO ka mea e hoʻopuka i kēia mau mea:

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

Waiwai

Pono propertye hoʻonoho ʻia ke kī i makemake ʻia no kekahi pono, a pono e loaʻa kahi waiwai CSS kūpono. Hoʻohana ʻia kēia waiwai i loko o nā lula o ka pono hana. Ke haʻalele ʻia ke classkī, hoʻohana pū ia ma ke ʻano he inoa papa paʻamau. E noʻonoʻo i ka text-decorationpono:

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

Puka:

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

Waiwai

E hoʻohana i ke valueskī e kuhikuhi i nā waiwai no ka mea i kuhikuhi propertyʻia e hoʻohana ʻia i nā inoa papa i hana ʻia a me nā lula. Hiki ke lilo i papa inoa a i ʻole palapala ʻāina (i hoʻonoho ʻia i loko o nā pono hana a i ʻole ma kahi ʻano Sass).

Ma keʻano he papa inoa, e like me text-decorationnā pono :

values: none underline line-through

E like me ka palapala 'āina, e like me opacitynā pono hana :

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

Ma ke ʻano he hoʻololi Sass e hoʻonohonoho i ka papa inoa a i ʻole ka palapala ʻāina, e like me kā mākou positionmea pono :

values: $position-values

Papa

E hoʻohana i ke classkoho e hoʻololi i ka prefix papa i hoʻohana ʻia i ka CSS i hōʻuluʻulu ʻia. No ka laʻana, e hoʻololi mai .opacity-*i .o-*:

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

Puka:

.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; }

ʻO nā pono hoʻololi CSS

E hoʻonoho i ka css-varkoho boolean truea e hoʻohua ka API i nā ʻano hoʻololi CSS kūloko no ka mea koho i hāʻawi ʻia ma kahi o nā property: valuelula maʻamau. E noʻonoʻo i kā mākou .text-opacity-*mea hoʻohana:

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

Puka:

.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; }

Nā hoʻololi CSS kūloko

E hoʻohana i ke local-varskoho no ka wehewehe ʻana i kahi palapala ʻāina Sass e hoʻopuka i nā ʻano hoʻololi CSS kūloko i loko o ka lula o ka papa pono. E ʻoluʻolu, pono paha e hana hou e hoʻopau i kēlā mau ʻano CSS kūloko i nā lula CSS i hana ʻia. No ka laʻana, e noʻonoʻo i kā mākou .bg-*mea pono:

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

Puka:

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

Mokuʻāina

E hoʻohana i ke statekoho e hana i nā ʻano like ʻole pseudo-class. ʻO nā laʻana pseudo-papa :hovera me :focus. Ke hāʻawi ʻia kahi papa inoa o nā mokuʻāina, hana ʻia nā papa inoa no kēlā pseudo-class. No ka laʻana, e hoʻololi i ka opacity ma ka hover, hoʻohui state: hovera loaʻa iā .opacity-hover:hoverʻoe i kāu CSS i hui ʻia.

Pono nā papa pseudo he nui? E hoʻohana i kahi papa inoa o nā mokuʻāina i hoʻokaʻawale ʻia: state: hover focus.

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

Puka:

.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; }

Pane

Hoʻohui i ka responsiveboolean e hana i nā pono hana pane (e laʻa, .opacity-md-25) ma nā wahi haʻi āpau .

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

Puka:

.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; }
}

Paʻi

ʻO ka ʻae ʻana i ke printkoho e hoʻopuka pū i nā papa pono no ka paʻi ʻana, i hoʻohana wale ʻia i loko o ka @media print { ... }nīnau media.

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

Puka:

.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; }
}

Mea nui

ʻO nā pono hana a pau i hana ʻia e ka API !importante hōʻoiaʻiʻo e hoʻopau lākou i nā ʻāpana a me nā papa hoʻololi e like me ka manaʻo. Hiki iā ʻoe ke hoʻololi i kēia hoʻonohonoho ma ke ao holoʻokoʻa me ka $enable-important-utilitieshoʻololi (paʻamau i true).

Ke hoʻohana nei i ka API

I kēia manawa ua kamaʻāina ʻoe i ka hana ʻana o ka API ponoʻī, e aʻo pehea e hoʻohui i kāu mau papa maʻamau a hoʻololi i kā mākou mau pono ponoʻī.

Hoʻopau i nā pono hana

Hoʻopau i nā pono hana e hoʻohana ana i ke kī like. No ka laʻana, inā makemake ʻoe i nā papa hana hoʻopihapiha hoʻopihapiha pane hou, hiki iā ʻoe ke hana i kēia:

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

Hoʻohui i nā pono hana

$utilitiesHiki ke hoʻohui ʻia nā pono hana hou i ka palapala ʻāina paʻamau me kahi map-merge. E hōʻoia i kā mākou mau faila Sass pono a _utilities.scsslawe ʻia ma mua, a laila e hoʻohana i ka mea map-mergee hoʻohui i kāu mau pono. No ka laʻana, eia pehea e hoʻohui ai i kahi cursorpono pane me nā waiwai ʻekolu.

@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,
    )
  )
);

Hoʻololi i nā pono hana

$utilitiesHoʻololi i nā pono hana ma ka palapala ʻāina paʻamau me map-getnā map-mergehana. Ma ka laʻana ma lalo nei, ke hoʻohui nei mākou i kahi waiwai hou i nā widthpono hana. E hoʻomaka me kahi mea mua map-mergea laila e kuhikuhi i ka pono āu e makemake ai e hoʻololi. Mai laila mai, e kiʻi i ka "width"palapala ʻāina pūnana me map-getke komo a hoʻololi i nā koho a me nā waiwai o ka pono.

@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%),
        ),
      ),
    ),
  )
);

Hiki ke pane

Hiki iā ʻoe ke ʻae i nā papa pane no kahi hoʻonohonoho o nā pono hana i pane ʻole ʻia i kēia manawa. No ka laʻana, no ka borderpane ʻana i nā papa:

@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 ),
    ),
  )
);

E hana kēia i nā ʻano like ʻole o kēlā .borderme .border-0kēia breakpoint. ʻO kāu CSS i hana ʻia e like me kēia:

.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 { ... }
}

Hoʻololi inoa i nā pono hana

Nalo nā pono v4, a i ʻole i hoʻohana ʻia i kahi hui inoa ʻē aʻe? Hiki ke hoʻohana ʻia ka API no ka hoʻopau ʻana i ka hopena classo kahi pono i hāʻawi ʻia - no ka laʻana, e hoʻololi i ka inoa .ms-*o nā pono hana i ka 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 ),
    ),
  )
);

Wehe i nā pono hana

Wehe i kekahi o nā pono hana paʻamau ma ka hoʻonohonoho ʻana i ke kī pūʻulu i null. No ka laʻana, e wehe i kā mākou mau widthpono āpau, hana i kahi $utilities map-mergea hoʻohui i "width": nullloko.

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

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

Wehe i ka pono ma RTL

ʻO kekahi mau hihia lihi e paʻakikī i ka hana ʻana i ka RTL , e like me nā laina laina ma ka ʻōlelo ʻAlapia. No laila hiki ke hoʻokuʻu ʻia nā pono hana mai RTL output ma ka hoʻonohonoho ʻana i ke rtlkoho i false:

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

Puka:

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

ʻAʻole kēia e hoʻopuka i kekahi mea ma RTL, mahalo i ke kuhikuhi mana RTLCSSremove .