RFS

എന്താണ് RFS?

ബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ സൈഡ് പ്രോജക്റ്റ് RFS ഒരു യൂണിറ്റ് വലുപ്പം മാറ്റുന്ന എഞ്ചിനാണ്, ഇത് തുടക്കത്തിൽ ഫോണ്ട് വലുപ്പം മാറ്റുന്നതിനായി വികസിപ്പിച്ചെടുത്തതാണ് (അതിനാൽ റെസ്‌പോൺസീവ് ഫോണ്ട് വലുപ്പങ്ങൾ എന്നതിന്റെ ചുരുക്കെഴുത്ത്). marginഇന്നത്തെ കാലത്ത് RFS ന്, padding, border-radius, അല്ലെങ്കിൽ പോലും പോലുള്ള യൂണിറ്റ് മൂല്യങ്ങളുള്ള മിക്ക CSS പ്രോപ്പർട്ടികൾ റീസ്‌കേൽ ചെയ്യാൻ പ്രാപ്തമാണ് box-shadow.

ബ്രൗസർ വ്യൂപോർട്ടിന്റെ അളവുകൾ അടിസ്ഥാനമാക്കി മെക്കാനിസം യാന്ത്രികമായി ഉചിതമായ മൂല്യങ്ങൾ കണക്കാക്കുന്നു. റെസ്‌പോൺസീവ് സ്കെയിലിംഗ് സ്വഭാവം പ്രവർത്തനക്ഷമമാക്കുന്നതിന് വ്യൂപോർട്ട് യൂണിറ്റുകളുടെ calc()മിശ്രിതവും ഫംഗ്‌ഷനുകളായി ഇത് കംപൈൽ ചെയ്യും .rem

RFS ഉപയോഗിക്കുന്നു

മിക്‌സിനുകൾ ബൂട്ട്‌സ്‌ട്രാപ്പിൽ ഉൾപ്പെടുത്തിയിട്ടുണ്ട്, നിങ്ങൾ ബൂട്ട്‌സ്‌ട്രാപ്പ് ഉൾപ്പെടുത്തിയാൽ ലഭ്യമാകും scss. ആവശ്യമെങ്കിൽ RFS സ്വതന്ത്രമായി ഇൻസ്റ്റാൾ ചെയ്യാനും കഴിയും .

മിക്സിനുകൾ ഉപയോഗിച്ച്

മിക്സിന് , , , , , , , , , കൂടാതെ , എന്നിവയ്‌ക്കായുള്ള rfs()ഷോർട്ട്‌ഹാൻഡുകൾ ഉണ്ട് . സോഴ്സ് സാസിനും കംപൈൽ ചെയ്ത സിഎസ്എസിനും താഴെയുള്ള ഉദാഹരണം കാണുക.font-sizemarginmargin-topmargin-rightmargin-bottommargin-leftpaddingpadding-toppadding-rightpadding-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 റിപ്പോസിറ്ററിയിൽ കാണാം .