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 ריפּאַזאַטאָרי .