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