LESS-এ সিলেক্টরগুলির ভিতরে ভেরিয়েবল

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

styles.less@var: div;

আসুন এই ভেরিয়েবলটি একটি সিলেক্টরে সন্নিবেশ করাই। বিভিন্ন পরিস্থিতি বিবেচনা করা যাক।

উদাহরণ

আমাদের ভেরিয়েবলটি একটি সিলেক্টর হিসাবে সন্নিবেশ করাই:

styles.less@{var} {
  font-size: 20px;
}

কম্পাইলেশনের ফলাফল:

styles.cssdiv {
  font-size: 20px;
}

উদাহরণ

ধরুন এখন আমাদের ভেরিয়েবলে রয়েছে সিলেক্টরের একটি অংশ:

styles.lessmain @{var} {
  font-size: 20px;
}

কম্পাইলেশনের ফলাফল:

styles.cssmain div {
  font-size: 20px;
}

উদাহরণ

ধরুন এখন আমরা বলি যে আমাদের ভেরিয়েবলে ট্যাগের নাম নয়, তার id রয়েছে। ভেরিয়েবলের নামের আগে একটি হ্যাশ চিহ্ন যোগ করা যাক:

styles.less#@{var} {
  font-size: 20px;
}

কম্পাইলেশনের ফলাফল:

styles.css#div {
  font-size: 20px;
}

উদাহরণ

ধরুন এখন আমরা বলি যে আমাদের ভেরিয়েবলে ট্যাগের নাম নয়, তার ক্লাস রয়েছে। ভেরিয়েবলের নামের আগে একটি ডট যোগ করা যাক:

styles.less.@{var} {
  font-size: 20px;
}

কম্পাইলেশনের ফলাফল:

styles.css.div {
  font-size: 20px;
}

ব্যবহারিক কাজ

Задание 1

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

styles.less@var: ul;

@{var} {
  font-size: 20px;
}
Задание 2

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

styles.less@var: ul;

div @{var} {
  font-size: 20px;
}
Задание 3

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

styles.less@var: ul;

div @{var} {
  font-size: 20px;
}
Задание 4

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

styles.less@var: ul;

@{var} li {
  font-size: 20px;
}
Задание 5

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

styles.less@var: list;

.@{var} {
  font-size: 20px;
}
Задание 6

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

styles.less@var: list;

#@{var} li {
  font-size: 20px;
}
Задание 7

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

styles.less@var: list;

.@{var} li {
  font-size: 20px;
}
Задание 8

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

styles.less@var: list;

ul.@{var} li {
  font-size: 20px;
}
Задание 9

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

styles.less@var: list;

ul.@{var} li {
  font-size: 20px;
}
Задание 10

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

styles.less@var: .block;

ul@{var} {
  font-size: 20px;
}
Задание 11

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

styles.less@var: .block;

ul@{var} li {
  font-size: 20px;
}
Задание 12

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

styles.less@var: a;

@{var}:hover {
  text-decoration: none;
}
Задание 13

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

styles.less@var1: div;
@var2: a;

@{var1} @{var2}:hover {
  text-decoration: none;
}
Задание 14

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

styles.less@var1: block1;
@var2: block2;

.@{var1}.@{var2} {
  font-size: 20px;
}