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:
@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:
@{var} {
font-size: 20px;
}
Derleme sonucu:
div {
font-size: 20px;
}
Örnek
Şimdi değişkenimizin seçicinin bir kısmını içerdiğini varsayalım:
main @{var} {
font-size: 20px;
}
Derleme sonucu:
main 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:
#@{var} {
font-size: 20px;
}
Derleme sonucu:
#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:
.@{var} {
font-size: 20px;
}
Derleme sonucu:
.div {
font-size: 20px;
}
Pratik Görevler
Aşağıdaki kodun derleme sonucunun ne olacağını açıklayın:
@var: ul;
@{var} {
font-size: 20px;
}
Aşağıdaki kodun derleme sonucunun ne olacağını açıklayın:
@var: ul;
div @{var} {
font-size: 20px;
}
Aşağıdaki kodun derleme sonucunun ne olacağını açıklayın:
@var: ul;
div @{var} {
font-size: 20px;
}
Aşağıdaki kodun derleme sonucunun ne olacağını açıklayın:
@var: ul;
@{var} li {
font-size: 20px;
}
Aşağıdaki kodun derleme sonucunun ne olacağını açıklayın:
@var: list;
.@{var} {
font-size: 20px;
}
Aşağıdaki kodun derleme sonucunun ne olacağını açıklayın:
@var: list;
#@{var} li {
font-size: 20px;
}
Aşağıdaki kodun derleme sonucunun ne olacağını açıklayın:
@var: list;
.@{var} li {
font-size: 20px;
}
Aşağıdaki kodun derleme sonucunun ne olacağını açıklayın:
@var: list;
ul.@{var} li {
font-size: 20px;
}
Aşağıdaki kodun derleme sonucunun ne olacağını açıklayın:
@var: list;
ul.@{var} li {
font-size: 20px;
}
Aşağıdaki kodun derleme sonucunun ne olacağını açıklayın:
@var: .block;
ul@{var} {
font-size: 20px;
}
Aşağıdaki kodun derleme sonucunun ne olacağını açıklayın:
@var: .block;
ul@{var} li {
font-size: 20px;
}
Aşağıdaki kodun derleme sonucunun ne olacağını açıklayın:
@var: a;
@{var}:hover {
text-decoration: none;
}
Aşağıdaki kodun derleme sonucunun ne olacağını açıklayın:
@var1: div;
@var2: a;
@{var1} @{var2}:hover {
text-decoration: none;
}
Aşağıdaki kodun derleme sonucunun ne olacağını açıklayın:
@var1: block1;
@var2: block2;
.@{var1}.@{var2} {
font-size: 20px;
}
