আরএফএস

RFS কি?

বুটস্ট্র্যাপের সাইড প্রজেক্ট RFS হল একটি ইউনিট রিসাইজিং ইঞ্জিন যা প্রাথমিকভাবে ফন্টের আকার পরিবর্তন করার জন্য তৈরি করা হয়েছিল (অতএব প্রতিক্রিয়াশীল ফন্ট সাইজের জন্য এর সংক্ষিপ্ত রূপ)। আজকাল RFS margin, padding, border-radius, বা এমনকি একক মান সহ বেশিরভাগ CSS বৈশিষ্ট্য পুনরায় স্কেলিং করতে সক্ষম box-shadow।

মেকানিজম স্বয়ংক্রিয়ভাবে ব্রাউজার ভিউপোর্টের মাত্রার উপর ভিত্তি করে উপযুক্ত মান গণনা করে। এটি প্রতিক্রিয়াশীল স্কেলিং আচরণ সক্ষম করতে ভিউপোর্ট ইউনিটের calc()মিশ্রণ সহ ফাংশনে সংকলিত হবে ।rem

RFS ব্যবহার করে

মিক্সিনগুলি বুটস্ট্র্যাপে অন্তর্ভুক্ত করা হয় এবং একবার আপনি বুটস্ট্র্যাপের অন্তর্ভুক্ত করলে উপলব্ধ হয় scss। প্রয়োজনে RFS স্বতন্ত্রভাবে ইনস্টল করা যেতে পারে ।

মিক্সিন ব্যবহার করে

মিক্সিনে , , , , , , , , , , এবং rfs()এর জন্য সংক্ষিপ্ত শব্দ রয়েছে । উৎস Sass এবং সংকলিত CSS-এর জন্য নিচের উদাহরণটি দেখুন।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 সংগ্রহস্থলে পাওয়া যাবে ।