LESS-এ সিলেক্টরগুলির ভিতরে ভেরিয়েবল
ভেরিয়েবলগুলি সিলেক্টরের ভিতরেও ব্যবহার করা যেতে পারে।
যাইহোক, এর জন্য ভেরিয়েবল সন্নিবেশের একটি কিছুটা ভিন্ন সিনট্যাক্স
ব্যবহার করতে হবে: @ এর পরে ভেরিয়েবলের নাম অবশ্যই
কোর্লি ব্রেসের মধ্যে নিতে হবে। আসুন উদাহরণ দিয়ে দেখি।
ধরুন আমাদের নিম্নলিখিত ভেরিয়েবল আছে:
@var: div;
আসুন এই ভেরিয়েবলটি একটি সিলেক্টরে সন্নিবেশ করাই। বিভিন্ন পরিস্থিতি বিবেচনা করা যাক।
উদাহরণ
আমাদের ভেরিয়েবলটি একটি সিলেক্টর হিসাবে সন্নিবেশ করাই:
@{var} {
font-size: 20px;
}
কম্পাইলেশনের ফলাফল:
div {
font-size: 20px;
}
উদাহরণ
ধরুন এখন আমাদের ভেরিয়েবলে রয়েছে সিলেক্টরের একটি অংশ:
main @{var} {
font-size: 20px;
}
কম্পাইলেশনের ফলাফল:
main div {
font-size: 20px;
}
উদাহরণ
ধরুন এখন আমরা বলি যে আমাদের ভেরিয়েবলে
ট্যাগের নাম নয়, তার id রয়েছে।
ভেরিয়েবলের নামের আগে একটি হ্যাশ চিহ্ন যোগ করা যাক:
#@{var} {
font-size: 20px;
}
কম্পাইলেশনের ফলাফল:
#div {
font-size: 20px;
}
উদাহরণ
ধরুন এখন আমরা বলি যে আমাদের ভেরিয়েবলে ট্যাগের নাম নয়, তার ক্লাস রয়েছে। ভেরিয়েবলের নামের আগে একটি ডট যোগ করা যাক:
.@{var} {
font-size: 20px;
}
কম্পাইলেশনের ফলাফল:
.div {
font-size: 20px;
}
ব্যবহারিক কাজ
নিচের কোডটির কম্পাইলেশনের ফলাফল কী হবে বলুন:
@var: ul;
@{var} {
font-size: 20px;
}
নিচের কোডটির কম্পাইলেশনের ফলাফল কী হবে বলুন:
@var: ul;
div @{var} {
font-size: 20px;
}
নিচের কোডটির কম্পাইলেশনের ফলাফল কী হবে বলুন:
@var: ul;
div @{var} {
font-size: 20px;
}
নিচের কোডটির কম্পাইলেশনের ফলাফল কী হবে বলুন:
@var: ul;
@{var} li {
font-size: 20px;
}
নিচের কোডটির কম্পাইলেশনের ফলাফল কী হবে বলুন:
@var: list;
.@{var} {
font-size: 20px;
}
নিচের কোডটির কম্পাইলেশনের ফলাফল কী হবে বলুন:
@var: list;
#@{var} li {
font-size: 20px;
}
নিচের কোডটির কম্পাইলেশনের ফলাফল কী হবে বলুন:
@var: list;
.@{var} li {
font-size: 20px;
}
নিচের কোডটির কম্পাইলেশনের ফলাফল কী হবে বলুন:
@var: list;
ul.@{var} li {
font-size: 20px;
}
নিচের কোডটির কম্পাইলেশনের ফলাফল কী হবে বলুন:
@var: list;
ul.@{var} li {
font-size: 20px;
}
নিচের কোডটির কম্পাইলেশনের ফলাফল কী হবে বলুন:
@var: .block;
ul@{var} {
font-size: 20px;
}
নিচের কোডটির কম্পাইলেশনের ফলাফল কী হবে বলুন:
@var: .block;
ul@{var} li {
font-size: 20px;
}
নিচের কোডটির কম্পাইলেশনের ফলাফল কী হবে বলুন:
@var: a;
@{var}:hover {
text-decoration: none;
}
নিচের কোডটির কম্পাইলেশনের ফলাফল কী হবে বলুন:
@var1: div;
@var2: a;
@{var1} @{var2}:hover {
text-decoration: none;
}
নিচের কোডটির কম্পাইলেশনের ফলাফল কী হবে বলুন:
@var1: block1;
@var2: block2;
.@{var1}.@{var2} {
font-size: 20px;
}