SASS-এ সিলেক্টর ইনহেরিটেন্স

স্টাইল নিয়ে কাজ করার সময় ইনহেরিটেন্সে সমস্যা দেখা দিতে পারে। যাইহোক, @extend ডাইরেক্টিভ ব্যবহার করে এড়ানো সহজ, কারণ এটি স্পষ্টভাবে নির্দেশ করে কোন সিলেক্টরটির অন্য সিলেক্টরের স্টাইল ইনহেরিট করা উচিত। আসুন একটি উদাহরণ দেখি:

আসুন একটি উদাহরণ দেখি:

style.scss.warning {
  border: 1px solid;
  background-color: #ffd900;
}

.personalWarning {
  @extend .warning;
  border-width: 3px;
}

এখন কম্পাইলেশনের ফলাফল দেখি:

style.css.warning, .personalWarning {
  border: 1px solid;
  background-color: #ffd900; }

.personalWarning {
  border-width: 3px; 
}
Задание 1

নিচের কোডের কম্পাইলেশনের ফলাফল কী হবে বলুন:

styles.scss#product-card {
  color: #302f2f;
  font-family: 'Times New Roman', Times, serif;
}

#product-card-title {
  @extend #product-card;
  font-weight: 600px;
}
Задание 2

পূর্ববর্তী সমস্যার শর্তগুলো পরিবর্তন করুন, যাতে #product-card, #product থেকে 500px সমান প্রস্থ ইনহেরিট করে।