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

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

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

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

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

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

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

.personalWarning {
	border-width: 3px; 
}

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

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

#product-card-title {
	@extend #product-card;
	font-weight: 600px;
}

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