К содержанию

LESS'ta Seçiciler İçinde Değişkenler

Değişkenler seçicilerin içinde de kullanılabilir. Ancak bunun için, değişkeni yerleştirmede biraz farklı bir sözdizimi kullanmanız gerekir: @ işaretinden sonra değişken adı kaşlı ayraçlar içine alınmalıdır. Örnekler üzerinde görelim. Aşağıdaki değişkene sahip olduğumuzu varsayalım:

styles.less@var: div;

Bu değişkeni bir seçiciye yerleştirelim. Farklı durumları ele alalım.

Örnek

Değişkenimizi bir seçici olarak yerleştirelim:

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

Derleme sonucu:

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

Örnek

Şimdi değişkenimizin seçicinin bir kısmını içerdiğini varsayalım:

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

Derleme sonucu:

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

Örnek

Şimdi değişkenimizin bir etiket adı değil, onun id' sini içerdiğini söylüyoruz. Değişken adından önce kare işareti ekleyelim:

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

Derleme sonucu:

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

Örnek

Şimdi değişkenimizin bir etiket adı değil, onun sınıfını içerdiğini söylüyoruz. Değişken adından önce nokta ekleyelim:

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

Derleme sonucu:

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

Pratik Görevler

Задание 1

Aşağıdaki kodun derleme sonucunun ne olacağını açıklayın:

styles.less@var: ul;

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

Задание 2

Aşağıdaki kodun derleme sonucunun ne olacağını açıklayın:

styles.less@var: ul;

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

Задание 3

Aşağıdaki kodun derleme sonucunun ne olacağını açıklayın:

styles.less@var: ul;

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

Задание 4

Aşağıdaki kodun derleme sonucunun ne olacağını açıklayın:

styles.less@var: ul;

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

Задание 5

Aşağıdaki kodun derleme sonucunun ne olacağını açıklayın:

styles.less@var: list;

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

Задание 6

Aşağıdaki kodun derleme sonucunun ne olacağını açıklayın:

styles.less@var: list;

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

Задание 7

Aşağıdaki kodun derleme sonucunun ne olacağını açıklayın:

styles.less@var: list;

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

Задание 8

Aşağıdaki kodun derleme sonucunun ne olacağını açıklayın:

styles.less@var: list;

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

Задание 9

Aşağıdaki kodun derleme sonucunun ne olacağını açıklayın:

styles.less@var: list;

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

Задание 10

Aşağıdaki kodun derleme sonucunun ne olacağını açıklayın:

styles.less@var: .block;

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

Задание 11

Aşağıdaki kodun derleme sonucunun ne olacağını açıklayın:

styles.less@var: .block;

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

Задание 12

Aşağıdaki kodun derleme sonucunun ne olacağını açıklayın:

styles.less@var: a;

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

Задание 13

Aşağıdaki kodun derleme sonucunun ne olacağını açıklayın:

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

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

Задание 14

Aşağıdaki kodun derleme sonucunun ne olacağını açıklayın:

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

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