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