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