RFS

RFS чист?

Лоиҳаи паҳлӯии Bootstrap RFS як муҳаррики тағир додани андозаи воҳид мебошад, ки дар аввал барои тағир додани андозаи шрифт таҳия шудааст (аз ин рӯ ихтисораи он барои Андозаи шрифтҳои ҳассос). Дар айни замон RFS қодир аст, ки аксари хосиятҳои CSS-ро бо арзишҳои воҳид ба монанди margin, padding, border-radius, ё ҳатто box-shadow.

Механизм ба таври худкор арзишҳои мувофиқро дар асоси андозаҳои намоишгоҳи браузер ҳисоб мекунад. Он ба calc()функсияҳо бо омехтаи remвоҳидҳои намоишӣ ва намоишӣ мураттаб карда мешавад, то рафтори миқёси ҷавобиро фаъол созад.

Истифодаи RFS

Миксинҳо ба Bootstrap дохил карда шудаанд ва пас аз ворид кардани Bootstrap дастрас мешаванд scss. RFS инчунин метавонад дар ҳолати зарурӣ мустақилона насб карда шавад.

Истифодаи омехтаҳо

Миксин rfs()барои font-size, margin, margin-top, margin-right, margin-bottom, margin-left, padding, padding-top, padding-right, padding-bottomва padding-left. Барои сарчашмаи Sass ва CSS тартибдодашуда ба мисоли зер нигаред.

.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()версияи моеъи арзишро бармегардонад, агар амвол дубора миқёс кардан лозим бошад.

Дар ин мисол, мо яке аз миксинҳои дарунсохташудаи нуқтаи қатъии Bootstrap-ро истифода мебарем, то танҳо услуби поёнтар аз 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 */
  }
}

Ҳуҷҷатҳои васеъ

RFS як лоиҳаи алоҳидаи созмони Bootstrap мебошад. Маълумоти бештарро дар бораи RFS ва конфигуратсияи он дар анбори GitHub пайдо кардан мумкин аст .