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:
@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:
@{var} {
font-size: 20px;
}
Ergebnis der Kompilierung:
div {
font-size: 20px;
}
Beispiel
Nehmen wir nun an, unsere Variable enthält einen Teil des Selektors:
main @{var} {
font-size: 20px;
}
Ergebnis der Kompilierung:
main 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:
#@{var} {
font-size: 20px;
}
Ergebnis der Kompilierung:
#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:
.@{var} {
font-size: 20px;
}
Ergebnis der Kompilierung:
.div {
font-size: 20px;
}
Praktische Aufgaben
Erklären Sie, wie das Ergebnis der Kompilierung des folgenden Codes aussieht:
@var: ul;
@{var} {
font-size: 20px;
}
Erklären Sie, wie das Ergebnis der Kompilierung des folgenden Codes aussieht:
@var: ul;
div @{var} {
font-size: 20px;
}
Erklären Sie, wie das Ergebnis der Kompilierung des folgenden Codes aussieht:
@var: ul;
div @{var} {
font-size: 20px;
}
Erklären Sie, wie das Ergebnis der Kompilierung des folgenden Codes aussieht:
@var: ul;
@{var} li {
font-size: 20px;
}
Erklären Sie, wie das Ergebnis der Kompilierung des folgenden Codes aussieht:
@var: list;
.@{var} {
font-size: 20px;
}
Erklären Sie, wie das Ergebnis der Kompilierung des folgenden Codes aussieht:
@var: list;
#@{var} li {
font-size: 20px;
}
Erklären Sie, wie das Ergebnis der Kompilierung des folgenden Codes aussieht:
@var: list;
.@{var} li {
font-size: 20px;
}
Erklären Sie, wie das Ergebnis der Kompilierung des folgenden Codes aussieht:
@var: list;
ul.@{var} li {
font-size: 20px;
}
Erklären Sie, wie das Ergebnis der Kompilierung des folgenden Codes aussieht:
@var: list;
ul.@{var} li {
font-size: 20px;
}
Erklären Sie, wie das Ergebnis der Kompilierung des folgenden Codes aussieht:
@var: .block;
ul@{var} {
font-size: 20px;
}
Erklären Sie, wie das Ergebnis der Kompilierung des folgenden Codes aussieht:
@var: .block;
ul@{var} li {
font-size: 20px;
}
Erklären Sie, wie das Ergebnis der Kompilierung des folgenden Codes aussieht:
@var: a;
@{var}:hover {
text-decoration: none;
}
Erklären Sie, wie das Ergebnis der Kompilierung des folgenden Codes aussieht:
@var1: div;
@var2: a;
@{var1} @{var2}:hover {
text-decoration: none;
}
Erklären Sie, wie das Ergebnis der Kompilierung des folgenden Codes aussieht:
@var1: block1;
@var2: block2;
.@{var1}.@{var2} {
font-size: 20px;
}
