К содержанию

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