SASS-এ @extend-এ সিলেক্টর সিকোয়েন্স মার্জ করা

যদি আমাদের সিলেক্টর সিকোয়েন্সগুলিকে মার্জ করার প্রয়োজন হয়, তবে আমরাও @extend ডাইরেক্টিভটি ব্যবহার করি:

নিম্নলিখিত উদাহরণটি বিবেচনা করুন:

style.scss#main .list p {
  font-weight: bold;
}
#sub .resume .link {
  @extend p;
}

css ফাইলে কম্পাইল করা কোডটি লক্ষ্য করুন, দুটি সিকোয়েন্স মার্জ করার সময়, যাদের কোনো সাধারণ সিলেক্টর নেই, তবে স্বয়ংক্রিয়ভাবে নতুন সিলেক্টর গঠিত হয়: একটি প্রথম সিকোয়েন্স সহ দ্বিতীয়টির আগে এবং একটি দ্বিতীয় সিকোয়েন্স সহ প্রথমটির আগে:

style.css#main .list p,
#main .list #sub .resume .link, #sub .resume #main .list .link {
  font-weight: bold;
}

যখন সিকোয়েন্সগুলির একটি সাধারণ সিলেক্টর থাকে, তবে তারা একত্রে মার্জ করা হবে এবং পার্থক্যগুলি একান্তরিত হবে (যদি কোনো থাকে)। নিম্নলিখিত উদাহরণে উভয় সিকোয়েন্সেরই #main আইডেন্টিফায়ার রয়েছে:

style.scss#main .list p {
  font-weight: semi-bold;
}
#main .resume .link {
  @extend p;
}

কম্পিলেশনের ফলস্বরূপ এই দুটি আইডেন্টিফায়ার মার্জ করা হবে:

style.css#main .list p,
#main .list #sub .resume .link, #sub .resume #main .list .link {
  font-weight: bold;
}

styles.scssdiv p {
  font-size: 12px;
  padding-bottom: 4px;
}
link button #card-title {
  @extend p;
}