РФС

Шта је РФС?

Боотстрап-ов споредни пројекат РФС је механизам за промену величине јединице који је првобитно развијен за промену величине фонта (отуда његова скраћеница за Респонсиве Фонт Сизес). Данас је РФС способан да промени величину већине ЦСС својстава са јединичним вредностима као што су margin, padding, border-radius, или чак box-shadow.

Механизам аутоматски израчунава одговарајуће вредности на основу димензија прозора прегледача. Биће компајлиран у calc()функције са мешавином јединица remи јединица за приказ како би се омогућило прилагодљиво понашање скалирања.

Користећи РФС

Миксини су укључени у Боотстрап и доступни су када укључите Боотстрап scss. РФС се такође може инсталирати самостално ако је потребно.

Коришћење миксина

Миксин rfs()има скраћенице за font-size, margin, margin-top, margin-right, margin-bottom, margin-left, padding, padding-top, padding-right, padding-bottom, и padding-left. Погледајте пример испод за изворни Сасс и компајлирани ЦСС.

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

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

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

Било које друго својство се може пренети rfs()миксину на следећи начин:

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

!importantтакође се може додати било којој вредности коју желите:

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

Коришћење функција

Када не желите да користите укључене, постоје и две функције:

• rfs-value()претвара вредност у remвредност ако се pxвредност проследи, у другим случајевима враћа исти резултат.
• rfs-fluid-value()враћа флуидну верзију вредности ако је особина потребна промена величине.

У овом примеру користимо један од Боотстрап-ових уграђених мешавина тачке прекида да бисмо применили стил само испод 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 */
  }
}

Проширена документација

РФС је посебан пројекат под Боотстрап организацијом. Више о РФС-у и његовој конфигурацији можете пронаћи у његовом ГитХуб спремишту .