RFS

Kini RFS?

Iṣẹ akanṣe ẹgbẹ Bootstrap RFS jẹ ẹrọ ti n ṣe atunṣe ẹyọkan eyiti o ni idagbasoke lakoko lati ṣe iwọn awọn iwọn fonti (nitorinaa abbreviation rẹ fun Awọn iwọn Font Idahun). Ni ode oni RFS ni agbara lati tunto pupọ julọ awọn ohun-ini CSS pẹlu awọn iye ẹyọkan bii margin, padding, border-radius, tabi paapaa box-shadow.

Ilana naa ṣe iṣiro awọn iye ti o yẹ laifọwọyi ti o da lori awọn iwọn ti oju wiwo ẹrọ aṣawakiri. Yoo ṣe akopọ sinu calc()awọn iṣẹ pẹlu apapọ remati awọn ẹya wiwo lati mu ihuwasi igbelosoke idahun ṣiṣẹ.

Lilo RFS

Awọn mixins wa ninu Bootstrap ati pe o wa ni kete ti o ba pẹlu Bootstrap's scss. RFS tun le fi sii ni imurasilẹ ti o ba nilo.

Lilo awọn mixins

rfs()Mixin ni awọn ọwọ kukuru fun , font-size, margin, margin-top, margin-right, margin-bottom, margin-left, padding, padding-top, padding-right, padding-bottomati padding-left. Wo apẹẹrẹ ni isalẹ fun orisun Sass ati CSS ti o ṣajọ.

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

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

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

Ohun-ini eyikeyi miiran le ṣee kọja si rfs()apopọ bii eyi:

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

!importanttun le kan ṣafikun si iye eyikeyi ti o fẹ:

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

Lilo awọn iṣẹ

Nigbati o ko ba fẹ lati lo pẹlu pẹlu, awọn iṣẹ meji tun wa:

• rfs-value()yi iye pada sinu remiye ti pxiye kan ba kọja, ni awọn igba miiran o da abajade kanna pada.
• rfs-fluid-value()da pada awọn ito version of a iye ti o ba ti ohun ini nilo rescaling.

Ninu apẹẹrẹ yii, a lo ọkan ninu Bootstrap ti a ṣe sinu awọn apopọ fifọ fifọ idahun lati lo aṣa nikan ni isalẹ aaye fifọ lg.

.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 */
  }
}

Awọn iwe ti o gbooro sii

RFS jẹ iṣẹ akanṣe lọtọ labẹ agbari Bootstrap. Diẹ sii nipa RFS ati iṣeto ni a le rii lori ibi ipamọ GitHub rẹ .