К содержанию

Muutujad selektorite sees LESS-is

Muutujaid saab kasutada ka selektorite sees. Selleks tuleb aga kasutada veidi teistsugust muutuja sisestamise süntaksit: pärast @ tuleb muutuja nimi võtta lookulgesse. Vaatame näidete varal. Oletame, et meil on järgmine muutuja:

styles.less@var: div;

Proovime seda muutujat sisestada selektorisse. Vaatleme erinevaid olukordi.

Näide

Sisestame oma muutuja selektorina:

styles.less@{var} {
  font-size: 20px;
}

Kompileerimise tulemus:

styles.cssdiv {
  font-size: 20px;
}

Näide

Oletame nüüd, et meie muutuja sisaldab osa selektorist:

styles.lessmain @{var} {
  font-size: 20px;
}

Kompileerimise tulemus:

styles.cssmain div {
  font-size: 20px;
}

Näide

Oletame nüüd, et me ütleme, et meie muutujas sisaldub mitte silti nimi, vaid selle id. Lisame muutuja nime ettre noobi:

styles.less#@{var} {
  font-size: 20px;
}

Kompileerimise tulemus:

styles.css#div {
  font-size: 20px;
}

Näide

Oletame nüüd, et me ütleme, et meie muutujas sisaldub mitte silti nimi, vaid selle klass. Lisame muutuja nime ettre punkti:

styles.less.@{var} {
  font-size: 20px;
}

Kompileerimise tulemus:

styles.css.div {
  font-size: 20px;
}

Praktilised ülesanded

Задание 1

Kirjelda, milline on järgmise koodi kompileerimise tulemus:

styles.less@var: ul;

@{var} {
  font-size: 20px;
}

Задание 2

Kirjelda, milline on järgmise koodi kompileerimise tulemus:

styles.less@var: ul;

div @{var} {
  font-size: 20px;
}

Задание 3

Kirjelda, milline on järgmise koodi kompileerimise tulemus:

styles.less@var: ul;

div @{var} {
  font-size: 20px;
}

Задание 4

Kirjelda, milline on järgmise koodi kompileerimise tulemus:

styles.less@var: ul;

@{var} li {
  font-size: 20px;
}

Задание 5

Kirjelda, milline on järgmise koodi kompileerimise tulemus:

styles.less@var: list;

.@{var} {
  font-size: 20px;
}

Задание 6

Kirjelda, milline on järgmise koodi kompileerimise tulemus:

styles.less@var: list;

#@{var} li {
  font-size: 20px;
}

Задание 7

Kirjelda, milline on järgmise koodi kompileerimise tulemus:

styles.less@var: list;

.@{var} li {
  font-size: 20px;
}

Задание 8

Kirjelda, milline on järgmise koodi kompileerimise tulemus:

styles.less@var: list;

ul.@{var} li {
  font-size: 20px;
}

Задание 9

Kirjelda, milline on järgmise koodi kompileerimise tulemus:

styles.less@var: list;

ul.@{var} li {
  font-size: 20px;
}

Задание 10

Kirjelda, milline on järgmise koodi kompileerimise tulemus:

styles.less@var: .block;

ul@{var} {
  font-size: 20px;
}

Задание 11

Kirjelda, milline on järgmise koodi kompileerimise tulemus:

styles.less@var: .block;

ul@{var} li {
  font-size: 20px;
}

Задание 12

Kirjelda, milline on järgmise koodi kompileerimise tulemus:

styles.less@var: a;

@{var}:hover {
  text-decoration: none;
}

Задание 13

Kirjelda, milline on järgmise koodi kompileerimise tulemus:

styles.less@var1: div;
@var2: a;

@{var1} @{var2}:hover {
  text-decoration: none;
}

Задание 14

Kirjelda, milline on järgmise koodi kompileerimise tulemus:

styles.less@var1: block1;
@var2: block2;

.@{var1}.@{var2} {
  font-size: 20px;
}