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;
}