LESS में क्लासेज का विस्तार
मिक्सिन की कमी यह है कि इससे कोड की नकल होती है। आइए एक उदाहरण से देखें, इसका क्या मतलब है।
मान लीजिए हमारे पास निम्नलिखित कोड है:
.mix {
width: 100px;
height: 100px;
}
p {
.mix;
color: red;
}
यह कोड निम्नलिखित तरीके से कंपाइल होगा, जिससे नकल पैदा होगी:
.mix {
width: 100px;
height: 100px;
}
p {
width: 100px;
height: 100px;
color: red;
}
अधिक संक्षिप्त तरीका यह होगा कि यह कोड निम्नलिखित तरीके से कंपाइल होता:
.mix, p {
width: 100px;
height: 100px;
}
p {
color: red;
}
इसे &:extend कमांड का उपयोग करके प्राप्त किया जा सकता है,
जो कोड में मिक्सिन को सीधे नहीं डालती,
बल्कि दी गई क्लास का विस्तार करती है। आइए
हमारा कोड सही करें:
.mix {
width: 100px;
height: 100px;
}
p {
&:extend(.mix);
color: red;
}
बताएं कि निम्नलिखित कोड का कंपाइलेशन परिणाम क्या होगा:
.mix {
color: red;
font-size: 20px;
}
p {
&:extend(.mix);
width: 300px;
}
बताएं कि निम्नलिखित कोड का कंपाइलेशन परिणाम क्या होगा:
.mix {
color: red;
font-size: 20px;
}
#block p {
&:extend(.mix);
width: 300px;
}
बताएं कि निम्नलिखित कोड का कंपाइलेशन परिणाम क्या होगा:
.mix {
color: red;
font-size: 20px;
}
#block p, #block div {
&:extend(.mix);
width: 300px;
}
बताएं कि निम्नलिखित कोड का कंपाइलेशन परिणाम क्या होगा:
.mix {
color: red;
font-size: 20px;
}
#block {
width: 300px;
p {
height: 100px;
&:extend(.mix);
}
div {
height: 200px;
&:extend(.mix);
}
}
बताएं कि निम्नलिखित कोड का कंपाइलेशन परिणाम क्या होगा:
.mix1 {
color: red;
}
.mix2 {
font-size: 20px;
}
div {
width: 300px;
&:extend(.mix1);
&:extend(.mix2);
}