К содержанию

Pembolehubah dalam Pemilih dalam LESS

Pembolehubah juga boleh digunakan di dalam pemilih. Walau bagaimanapun, untuk ini, anda perlu menggunakan sintaksis penyisipan pembolehubah yang sedikit berbeza: selepas @ nama pembolehubah perlu diambil dalam kurungan kerinting. Mari kita lihat contoh. Katakan kita mempunyai pembolehubah berikut:

styles.less@var: div;

Mari lakukan penyisipan pembolehubah ini ke dalam pemilih. Pertimbangkan situasi yang berbeza.

Contoh

Mari lakukan penyisipan pembolehubah kami sebagai pemilih:

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

Keputusan kompilasi:

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

Contoh

Sekarang katakan pembolehubah kami mengandungi sebahagian pemilih:

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

Keputusan kompilasi:

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

Contoh

Sekarang katakan kita mengatakan bahawa dalam pembolehubah kami terkandung bukan nama tag, tetapi id-nya. Tambahkan tanda pagar sebelum nama pembolehubah:

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

Keputusan kompilasi:

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

Contoh

Sekarang katakan kita mengatakan bahawa dalam pembolehubah kami terkandung bukan nama tag, tetapi kelasnya. Tambahkan titik sebelum nama pembolehubah:

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

Keputusan kompilasi:

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

Tugas Praktikal

Задание 1

Beritahu apakah hasil kompilasi kod berikut:

styles.less@var: ul;

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

Задание 2

Beritahu apakah hasil kompilasi kod berikut:

styles.less@var: ul;

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

Задание 3

Beritahu apakah hasil kompilasi kod berikut:

styles.less@var: ul;

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

Задание 4

Beritahu apakah hasil kompilasi kod berikut:

styles.less@var: ul;

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

Задание 5

Beritahu apakah hasil kompilasi kod berikut:

styles.less@var: list;

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

Задание 6

Beritahu apakah hasil kompilasi kod berikut:

styles.less@var: list;

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

Задание 7

Beritahu apakah hasil kompilasi kod berikut:

styles.less@var: list;

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

Задание 8

Beritahu apakah hasil kompilasi kod berikut:

styles.less@var: list;

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

Задание 9

Beritahu apakah hasil kompilasi kod berikut:

styles.less@var: list;

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

Задание 10

Beritahu apakah hasil kompilasi kod berikut:

styles.less@var: .block;

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

Задание 11

Beritahu apakah hasil kompilasi kod berikut:

styles.less@var: .block;

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

Задание 12

Beritahu apakah hasil kompilasi kod berikut:

styles.less@var: a;

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

Задание 13

Beritahu apakah hasil kompilasi kod berikut:

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

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

Задание 14

Beritahu apakah hasil kompilasi kod berikut:

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

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