RFS

RFS என்றால் என்ன?

பூட்ஸ்டார்ப்பின் பக்கத் திட்டம் RFS என்பது யூனிட் மறுஅளவிடுதல் இயந்திரம் ஆகும், இது ஆரம்பத்தில் எழுத்துரு அளவுகளை மாற்றுவதற்காக உருவாக்கப்பட்டது (எனவே அதன் சுருக்கம் பொறுப்பு எழுத்துரு அளவுகள்). marginஇப்போதெல்லாம் RFS ஆனது , padding, border-radius, அல்லது கூட போன்ற யூனிட் மதிப்புகளுடன் பெரும்பாலான CSS பண்புகளை மறுபரிசீலனை செய்யும் திறன் கொண்டது 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 களஞ்சியத்தில் காணலாம் .