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 i 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 ʻāina 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	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 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	Hoʻololi no ka inoa papa inā ʻaʻole ʻoe makemake e like ia me ka waiwai. Inā ʻaʻole ʻoe e hāʻawi i ke `class`kī a ʻo `property`ke kī he laina laina, ʻo ka inoa papa ka mea mua o ka `property`array.
`state`	Koho	Ka papa inoa o nā ʻano ʻano pseudo-class e like me a i `:hover`ʻole `:focus`e hana ai no ka pono. ʻAʻohe waiwai paʻamau.
`responsive`	Koho	Hōʻike ʻo Boolean inā pono e hana ʻia nā papa pane. `false`ma ka paʻamau.
`rfs`	Koho	ʻO Boolean e hiki ai ke hoʻonui hou i ka wai. E nānā i ka ʻaoʻao RFS e ʻike pehea e hana ai kēia. `false`ma ka paʻamau.
`print`	Koho	Hōʻike ʻo Boolean inā pono e hana ʻia nā papa paʻi. `false`ma ka paʻamau.
`rtl`	Koho	Hōʻike ʻo Boolean inā pono e mālama ʻia ka pono ma RTL. `true`ma ka paʻamau.

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

Prefix papa maʻamau

E hoʻohana i ke classkoho e hoʻololi i ka prefix papa i hoʻohana ʻia i ka CSS i hui ʻia:

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

Puka:

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

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

Nā pono hana 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; }
}

Ke hoʻololi nei 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,
  ),
);

Nā pono 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ʻ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 .