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:
@var: div;
Mari kita lakukan penyisipan variabel ini ke dalam selektor. Pertimbangkan berbagai situasi.
Contoh
Lakukan penyisipan variabel kita sebagai selektor:
@{var} {
font-size: 20px;
}
Hasil kompilasi:
div {
font-size: 20px;
}
Contoh
Sekarang misalkan variabel kita berisi bagian dari selektor:
main @{var} {
font-size: 20px;
}
Hasil kompilasi:
main 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:
#@{var} {
font-size: 20px;
}
Hasil kompilasi:
#div {
font-size: 20px;
}
Contoh
Sekarang misalkan kita mengatakan bahwa dalam variabel kita berisi bukan nama tag, melainkan kelasnya. Tambahkan titik sebelum nama variabel:
.@{var} {
font-size: 20px;
}
Hasil kompilasi:
.div {
font-size: 20px;
}
Tugas Praktis
Jelaskan, apa hasil kompilasi dari kode berikut:
@var: ul;
@{var} {
font-size: 20px;
}
Jelaskan, apa hasil kompilasi dari kode berikut:
@var: ul;
div @{var} {
font-size: 20px;
}
Jelaskan, apa hasil kompilasi dari kode berikut:
@var: ul;
div @{var} {
font-size: 20px;
}
Jelaskan, apa hasil kompilasi dari kode berikut:
@var: ul;
@{var} li {
font-size: 20px;
}
Jelaskan, apa hasil kompilasi dari kode berikut:
@var: list;
.@{var} {
font-size: 20px;
}
Jelaskan, apa hasil kompilasi dari kode berikut:
@var: list;
#@{var} li {
font-size: 20px;
}
Jelaskan, apa hasil kompilasi dari kode berikut:
@var: list;
.@{var} li {
font-size: 20px;
}
Jelaskan, apa hasil kompilasi dari kode berikut:
@var: list;
ul.@{var} li {
font-size: 20px;
}
Jelaskan, apa hasil kompilasi dari kode berikut:
@var: list;
ul.@{var} li {
font-size: 20px;
}
Jelaskan, apa hasil kompilasi dari kode berikut:
@var: .block;
ul@{var} {
font-size: 20px;
}
Jelaskan, apa hasil kompilasi dari kode berikut:
@var: .block;
ul@{var} li {
font-size: 20px;
}
Jelaskan, apa hasil kompilasi dari kode berikut:
@var: a;
@{var}:hover {
text-decoration: none;
}
Jelaskan, apa hasil kompilasi dari kode berikut:
@var1: div;
@var2: a;
@{var1} @{var2}:hover {
text-decoration: none;
}
Jelaskan, apa hasil kompilasi dari kode berikut:
@var1: block1;
@var2: block2;
.@{var1}.@{var2} {
font-size: 20px;
}
