RFS

RFS چییە؟

پرۆژەی لاوەکی Bootstrap RFS بزوێنەری گۆڕینی قەبارەی یەکە کە سەرەتا پەرەی پێدرا بۆ گۆڕینی قەبارەی فۆنتەکان (هەربۆیە کورتکراوەی بۆ قەبارەی فۆنتەکانی وەڵامدەرەوە). لە ئێستادا RFS توانای دووبارە پێوانەکردنی زۆربەی تایبەتمەندییەکانی CSS بە بەهای یەکە وەک margin, padding, border-radius, یان تەنانەت box-shadow.

میکانیزمەکە بە شێوەیەکی ئۆتۆماتیکی بەها گونجاوەکان بە پشتبەستن بە ڕەهەندەکانی دەرچەی بینینی وێبگەڕەکە حیسابی بۆ دەکات. کۆدەکرێتەوە بۆ calc()فەنکشنەکان بە تێکەڵەیەک لە remیەکەکانی و ڤیوپۆرت بۆ چالاککردنی هەڵسوکەوتی پێوانەکردنی وەڵامدەرەوە.

بەکارهێنانی RFS

میکسینەکان لە Bootstrap دا هەیە و بەردەستن کاتێک Bootstrap's ی تێدا جێگیر کرد 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);
}

بەکارهێنانی فەنکشنەکان

کاتێک ناتەوێت includes بەکاربهێنیت، دوو فەنکشنیش هەیە:

• 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 یدا بدۆزرێتەوە .