LESS-এ মিক্সিন

এই পাঠে আমরা মিক্সিন (মিক্সিং) এর সাথে পরিচিত হব, যা একটি ক্লাসকে অন্য ক্লাসের ভিতরে অন্তর্ভুক্ত করতে দেয়। আসুন জেনে নিই এটি কী এবং এটি নিয়ে কীভাবে কাজ করতে হয়।

মূলত মিক্সিন হল একটি ক্লাসের ভিতরে অন্য ক্লাস ব্যবহার করা, যখন একটি ক্লাস একটি টেমপ্লেট হয় - কোডের একটি নির্দিষ্ট অংশ, যা আমরা অনেক জায়গায় ব্যবহার করতে পারি।

এটি কীভাবে সুবিধাজনক? খাঁটি CSS-তে আমাদের কোডের টেমপ্লেটটি সব জায়গায় লিখতে হত যেখানে এটি প্রয়োজন, কিন্তু LESS-এ আমরা এটি একটি জায়গায় লিখতে পারি এবং তারপর কোডের প্রয়োজনীয় স্থানগুলিতে এটি সংযোগ করতে পারি।

আসুন একটি উদাহরণ দেখি। ধরা যাক আমাদের নিম্নলিখিত ক্লাস আছে:

styles.less.mix {
  width: 100px;
  height: 100px;
}

আসুন এই ক্লাসটিকে একটি মিক্সিন হিসাবে ব্যবহার করি:

styles.lessp {
  .mix;
  color: red;
}

ফলস্বরূপ, কম্পাইলেশনের পরে আমাদের ক্লাসের স্টাইলগুলি প্যারাগ্রাফে ঢোকানো হবে:

styles.cssp {
  width: 100px;
  height: 100px;
  color: red;
}

styles.less.mix {
  color: white;
  background: black;
}

p {
  .mix;
  width: 300px;
}