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