RFS

RFS అంటే ఏమిటి?

బూట్‌స్ట్రాప్ యొక్క సైడ్ ప్రాజెక్ట్ RFS అనేది యూనిట్ పరిమాణాన్ని మార్చే ఇంజిన్, ఇది మొదట ఫాంట్ పరిమాణాల పరిమాణాన్ని మార్చడానికి అభివృద్ధి చేయబడింది (అందుకే రెస్పాన్సివ్ ఫాంట్ సైజుల కోసం దీని సంక్షిప్తీకరణ). ఈ రోజుల్లో RFS చాలా CSS లక్షణాలను margin, padding, border-radius, లేదా వంటి యూనిట్ విలువలతో రీస్కేల్ చేయగలదు box-shadow.

మెకానిజం బ్రౌజర్ వీక్షణపోర్ట్ యొక్క కొలతలు ఆధారంగా తగిన విలువలను స్వయంచాలకంగా గణిస్తుంది. ప్రతిస్పందించే స్కేలింగ్ ప్రవర్తనను ప్రారంభించడానికి ఇది calc()మిక్స్ మరియు వ్యూపోర్ట్ యూనిట్‌లతో ఫంక్షన్‌లుగా కంపైల్ చేయబడుతుంది .rem

RFSని ఉపయోగించడం

మిక్సిన్‌లు బూట్‌స్ట్రాప్‌లో చేర్చబడ్డాయి మరియు మీరు బూట్‌స్ట్రాప్‌లను చేర్చిన తర్వాత అందుబాటులో ఉంటాయి scss. అవసరమైతే RFS స్వతంత్రంగా కూడా ఇన్‌స్టాల్ చేయవచ్చు .

మిక్స్‌లను ఉపయోగించడం

rfs()మిక్సిన్‌లో font-size, margin, margin-top, margin-right, margin-bottom, margin-left, padding, padding-top, మరియు . _ padding-right_ సోర్స్ సాస్ మరియు కంపైల్డ్ CSS కోసం దిగువ ఉదాహరణను చూడండి.padding-bottompadding-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 */
  }
}

విస్తరించిన డాక్యుమెంటేషన్

RFS అనేది బూట్‌స్ట్రాప్ సంస్థ క్రింద ఒక ప్రత్యేక ప్రాజెక్ట్. RFS మరియు దాని కాన్ఫిగరేషన్ గురించి మరింత దాని GitHub రిపోజిటరీలో చూడవచ్చు .