К содержанию

Variablen innerhalb von Selektoren in LESS

Variablen können auch innerhalb von Selektoren verwendet werden. Dafür muss jedoch eine etwas andere Syntax für das Einfügen der Variable verwendet werden: Nach dem @ muss der Variablenname in geschweifte Klammern gesetzt werden. Schauen wir uns Beispiele an. Nehmen wir an, wir haben die folgende Variable:

styles.less@var: div;

Lassen Sie uns diese Variable in einen Selektor einfügen. Betrachten wir verschiedene Situationen.

Beispiel

Fügen wir unsere Variable als Selektor ein:

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

Ergebnis der Kompilierung:

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

Beispiel

Nehmen wir nun an, unsere Variable enthält einen Teil des Selektors:

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

Ergebnis der Kompilierung:

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

Beispiel

Nehmen wir nun an, wir sagen, dass in unserer Variable nicht der Tag-Name, sondern seine id enthalten ist. Fügen wir vor dem Variablennamen eine Raute hinzu:

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

Ergebnis der Kompilierung:

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

Beispiel

Nehmen wir nun an, wir sagen, dass in unserer Variable nicht der Tag-Name, sondern seine Klasse enthalten ist. Fügen wir vor dem Variablennamen einen Punkt hinzu:

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

Ergebnis der Kompilierung:

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

Praktische Aufgaben

Задание 1

Erklären Sie, wie das Ergebnis der Kompilierung des folgenden Codes aussieht:

styles.less@var: ul;

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

Задание 2

Erklären Sie, wie das Ergebnis der Kompilierung des folgenden Codes aussieht:

styles.less@var: ul;

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

Задание 3

Erklären Sie, wie das Ergebnis der Kompilierung des folgenden Codes aussieht:

styles.less@var: ul;

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

Задание 4

Erklären Sie, wie das Ergebnis der Kompilierung des folgenden Codes aussieht:

styles.less@var: ul;

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

Задание 5

Erklären Sie, wie das Ergebnis der Kompilierung des folgenden Codes aussieht:

styles.less@var: list;

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

Задание 6

Erklären Sie, wie das Ergebnis der Kompilierung des folgenden Codes aussieht:

styles.less@var: list;

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

Задание 7

Erklären Sie, wie das Ergebnis der Kompilierung des folgenden Codes aussieht:

styles.less@var: list;

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

Задание 8

Erklären Sie, wie das Ergebnis der Kompilierung des folgenden Codes aussieht:

styles.less@var: list;

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

Задание 9

Erklären Sie, wie das Ergebnis der Kompilierung des folgenden Codes aussieht:

styles.less@var: list;

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

Задание 10

Erklären Sie, wie das Ergebnis der Kompilierung des folgenden Codes aussieht:

styles.less@var: .block;

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

Задание 11

Erklären Sie, wie das Ergebnis der Kompilierung des folgenden Codes aussieht:

styles.less@var: .block;

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

Задание 12

Erklären Sie, wie das Ergebnis der Kompilierung des folgenden Codes aussieht:

styles.less@var: a;

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

Задание 13

Erklären Sie, wie das Ergebnis der Kompilierung des folgenden Codes aussieht:

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

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

Задание 14

Erklären Sie, wie das Ergebnis der Kompilierung des folgenden Codes aussieht:

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

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