К содержанию

Variabel di Dalam Selektor di LESS

Variabel juga dapat digunakan di dalam selektor. Namun, untuk ini, kita perlu menggunakan sintaksis penyisipan variabel yang sedikit berbeda: setelah @ nama variabel perlu ditempatkan dalam kurung kurawal. Mari kita lihat contohnya. Misalkan kita memiliki variabel berikut:

styles.less@var: div;

Mari kita lakukan penyisipan variabel ini ke dalam selektor. Pertimbangkan berbagai situasi.

Contoh

Lakukan penyisipan variabel kita sebagai selektor:

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

Hasil kompilasi:

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

Contoh

Sekarang misalkan variabel kita berisi bagian dari selektor:

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

Hasil kompilasi:

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

Contoh

Sekarang misalkan kita mengatakan bahwa dalam variabel kita berisi bukan nama tag, melainkan id-nya. Tambahkan tanda pagar sebelum nama variabel:

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

Hasil kompilasi:

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

Contoh

Sekarang misalkan kita mengatakan bahwa dalam variabel kita berisi bukan nama tag, melainkan kelasnya. Tambahkan titik sebelum nama variabel:

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

Hasil kompilasi:

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

Tugas Praktis

Задание 1

Jelaskan, apa hasil kompilasi dari kode berikut:

styles.less@var: ul;

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

Задание 2

Jelaskan, apa hasil kompilasi dari kode berikut:

styles.less@var: ul;

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

Задание 3

Jelaskan, apa hasil kompilasi dari kode berikut:

styles.less@var: ul;

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

Задание 4

Jelaskan, apa hasil kompilasi dari kode berikut:

styles.less@var: ul;

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

Задание 5

Jelaskan, apa hasil kompilasi dari kode berikut:

styles.less@var: list;

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

Задание 6

Jelaskan, apa hasil kompilasi dari kode berikut:

styles.less@var: list;

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

Задание 7

Jelaskan, apa hasil kompilasi dari kode berikut:

styles.less@var: list;

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

Задание 8

Jelaskan, apa hasil kompilasi dari kode berikut:

styles.less@var: list;

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

Задание 9

Jelaskan, apa hasil kompilasi dari kode berikut:

styles.less@var: list;

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

Задание 10

Jelaskan, apa hasil kompilasi dari kode berikut:

styles.less@var: .block;

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

Задание 11

Jelaskan, apa hasil kompilasi dari kode berikut:

styles.less@var: .block;

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

Задание 12

Jelaskan, apa hasil kompilasi dari kode berikut:

styles.less@var: a;

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

Задание 13

Jelaskan, apa hasil kompilasi dari kode berikut:

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

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

Задание 14

Jelaskan, apa hasil kompilasi dari kode berikut:

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

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