Sass @extend এবং উত্তরসূরী

এসসিএস @extend ইনট্রাক্সটসকে সংশ্লিষ্ট করা হয়েছে।

@extend ইনট্রাক্সটসকে সংশ্লিষ্ট করা হয়েছে।

যদি আপনার কোনও বিষয়কে সামান্যতম সমান শৈলীর উপাদান থাকে, কিন্তু কিছু ছোট বিবর্তন থাকে, তবে @extend ইনট্রাক্সটসকে সংশ্লিষ্ট করা হয়েছে।

নিচের স্যাস উদাহরণটি বাটনকে একটি মৌলিক শৈলী তৈরি করে (এই শৈলী অধিকাংশ বাটনের জন্য ব্যবহৃত হবে)। তারপর, আমরা "Report" বাটনের জন্য একটি শৈলী তৈরি করি এবং "Submit" বাটনের জন্য একটি শৈলী তৈরি করি। "Report" এবং "Submit" বাটনগুলি পারস্পরিকের সাথে @extend ইনট্রাক্সটসকে সংশ্লিষ্ট করা হয়েছে .button-basic শ্রেণীর সকল সিএসএস বৈশিষ্ট্যগুলির উত্তরসূরীতা পায়। এছাড়াও, তারা নিজস্ব রঙ নির্ধারণ করে:

এসসিএস গঠনশৈলী:

.button-basic  {
  border: none;
  padding: 15px 30px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
}
.button-report  {
  @extend .button-basic;
  background-color: red;
}
.button-submit  {
  @extend .button-basic;
  background-color: green;
  color: white;
}

কম্পাইল করা হলে, CSS এমনভাবে দেখবে:

CSS আউটপুট:

.button-basic, .button-report, .button-submit {
  border: none;
  padding: 15px 30px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
}
.button-report  {
  background-color: red;
}
.button-submit  {
  background-color: green;
  color: white;
}

ব্যবহার করে @extend ইনস্ট্রাকশন, আপনাকে এইমধ্যে এলিমেন্টটির ক্লাসগুলির বেশ কয়েকটি ক্লাস নির্দিষ্ট করতে হবে না যেমন: <button class="button-basic button-report">Report this</button>।আপনাকে শুধুমাত্র .button-report নির্দিষ্ট করতে হবে এবং দুটি শৈলী পাওয়া যাবে।

@extend ইনস্ট্রাকশন আপনার Sass কোডটিকে খুবই অসম্পূর্ণ রাখতে সাহায্য করে (DRY)。