RFS

Waa maxay RFS?

Mashruuca dhinaca Bootstrap ee RFS waa halbeeg wax ka beddelaya matoorka kaas oo markii hore loo sameeyay si loo cabbiro cabbirrada farta (sidaa darteed loo soo gaabiyo cabbirrada farta ee Jawaabta ah). Maalmahan RFS waxa ay awood u leedahay in ay dib u habayn ku samayso inta badan guryaha CSS ee leh qiyamka unugga sida margin, padding, border-radius, ama xataa box-shadow.

Habkani wuxuu si toos ah u xisaabiyaa qiyamka ku haboon iyadoo lagu salaynayo cabbirka goobta daawashada browserka. Waxaa lagu soo ururin doonaa calc()hawlo leh isku dhafan remiyo unugyo daawasho si ay awood ugu yeelato hab-dhaqanka miisaan-qaadista.

Isticmaalka RFS

Isku darka waxay ku jiraan Bootstrap waxayna diyaar yihiin markaad ku darto Bootstrap's scss. RFS sidoo kale waxaa lagu rakibi karaa kali ahaan haddii loo baahdo.

Isticmaalka isku-dhafka

Isku- rfs()darku wuxuu leeyahay gacmo-gaaban oo loogu talagalay font-size, margin, margin-top, margin-right, margin-bottom, margin-left, padding, padding-top, padding-right, padding-bottom, iyo padding-left. Fiiri tusaalaha hoose ee isha Sass iyo CSS la soo ururiyey.

.title {
  @include font-size(4rem);
}

.title {
  font-size: calc(1.525rem + 3.3vw);
}

@media (min-width: 1200px) {
  .title {
    font-size: 4rem;
  }
}

Hanti kasta oo kale ayaa loo gudbin karaa isku- rfs()dhafka sida tan:

.selector {
  @include rfs(4rem, border-radius);
}

!importantWaxa kale oo lagu dari karaa qiime kasta oo aad rabto:

.selector {
  @include padding(2.5rem !important);
}

Isticmaalka hawlaha

Marka aadan rabin inaad isticmaasho waxa ka mid ah, waxa kale oo jira laba hawlood:

• rfs-value()wuxuu u beddelaa qiime remqiimo haddii pxqiimaha la dhaafo, xaaladaha kale waxay soo celisaa isla natiijada.
• rfs-fluid-value()soo celisa nooca dareeraha ee qiimaha haddii hantidu u baahan tahay dib u habeyn.

Tusaalahan, waxaanu isticmaalnaa mid ka mid ah Bootstrap-ku-ku- jirsan ee kajawaabista dhibcooyinka jabinta si aan ugu dabaqno qaabaynta ka hoosaysa barta lgjabinta.

.selector {
  @include media-breakpoint-down(lg) {
    padding: rfs-fluid-value(2rem);
    font-size: rfs-fluid-value(1.125rem);
  }
}

@media (max-width: 991.98px) {
  .selector {
    padding: calc(1.325rem + 0.9vw);
    font-size: 1.125rem; /* 1.125rem is small enough, so RFS won't rescale this */
  }
}

Dukumentiyada la dheereeyey

RFS waa mashruuc gaar ah oo hoos yimaada ururka Bootstrap. Wax badan oo ku saabsan RFS iyo qaabeynteeda ayaa laga heli karaa kaydkeeda GitHub .