SASS-এ @media ডাইরেক্টিভ

SASS-এ, @media ডাইরেক্টিভ CSS-এ সংশ্লিষ্ট নিয়মের মতোই প্রয়োগ করা হয়। এবং এটিও সরাসরি সমস্ত CSS নিয়মের মধ্যে নেস্টেড করা যেতে পারে। এটি লক্ষণীয় যে যখন আমরা @media ডাইরেক্টিভকে CSS নিয়মের মধ্যে নেস্টেড করি, কম্পাইলেশনের পরে এটি স্টাইল শীটের শীর্ষে উঠে যায়, এবং সেই সিলেক্টরগুলি যার মধ্যে ডাইরেক্টিভটি স্থাপন করা হয়েছিল তা @media-এর ভিতরে চলে যায়। এর উপর ভিত্তি করে, সিলেক্টরগুলি পুনরাবৃত্তি না করে বা স্টাইল শীটের ফ্লো ভঙ্গ না করে @media ডাইরেক্টিভে নিয়ম যোগ করা সম্ভব।

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

style.scss.navbar {
  width: 400px;
  @media picture and (orientation: portrait) {
    width: 300px;
    height: auto;
  }
}

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

style.css.navbar {
  width: 400px; 
}
@media picture and (orientation: portrait) {
  .navbar {
    width: 300px;
    height: auto; 
  } 
}

@media ক্যোয়ারীগুলিকে একে অপরের মধ্যে নেস্টেড করারও সম্ভাবনা রয়েছে, এবং কম্পাইলেশনের পরে সেগুলি and অপারেটর দ্বারা সংযুক্ত হয়:

style.scss@media div {
  .picture {
    @media (orientation: portrait) {
      width: 200px;
    }
  }
}

কম্পাইলেশনের পরে আমরা এটি দেখতে পাব:

style.css@media div and (orientation: portrait) {
  .picture {
    width: 200px; 
  } 
}

@media ডাইরেক্টিভের আরেকটি বৈশিষ্ট্য হল যে এটি ভেরিয়েবল, ফাংশন এবং অপারেটর পাস করতে পারে:

style.scss$media: style;
$feature: -webkit-max-device;
$value: 3.0;
    
@media #{$media} and ($feature: $value) {
  div {
    color: red;
  }
}

এবং style.css ফাইলে আমরা নিম্নলিখিত কোড পাই:

style.css@media style and (-webkit-max-device: 3) {
    div {
      color: red; 
    } 
}

styles.scss.active-link {
  color: blue;
  @media content {
    font-size: 14px;
    text-decoration: underline;
  }
}

styles.scss@media p {
  #product-card {
    @media (font-family: Arial) {
      font-size: 12px;
    }
  }
  #product-card-title {
    @media (font-family: Arial) {
      font-size: 14px;
      font-weight: bold;
    }
  }
}

styles.scss$var: link;
$font: font-size;
$size: 10px;
    
@media #{$var} and ($font: $size) {
  .block {
    color: red;
  }
}