CSS/SCSS Gelişmiş Özelleştirme Nasıl Kullanılır?
CSS/SCSS Gelişmiş Özelleştirme Nasıl Kullanılır?
Bu Bölüm Nedir?
Renkler menüsündeki bu bölüm, uygulamanızı CSS/SCSS Gelişmiş ile daha derinleştirmenizi sağlar. Bir uygulamada CSS/SCSS gelişmiş özelleştirmeyi kullanarak Şablon 6’ya dayalı bir değişiklikle ilgili bir örnek:
CSS Nedir?
CSS, bir sayfayı formatlandırmak ve biçimlendirmek için bir programlama dilidir (basit olanı).Basamaklı Stil Sayfası (Cascading Style Sheet) anlamına gelir ve HTML5 öğelerinin nasıl görüntülendiğini tanımlar. Daha fazlası yakında burada.
SCSS Nedir?
SCSS, CSS3’ün bir üst kümesidir. Özellikle yuvalama ve değişkenleri kullanarak klasik CSS’ye daha fazla seçenek ekler.
Örnek olarak, CSS ve SCSS’de yazılan iki stil sayfası:
CSS kodu:
#body {
margin: 0;
border: 1px solid red;
}
#body p {
font-size: 13px;
font-weight: bold;
color: yellow;
}
#body h {
text-transform: capitalize;
}
SCSS kodunda da aynısı yazılmıştır:
$colorYellow: yellow;
#body {
margin: 0;
border: 1px solid $colorYellow;
p {
color: $colorYellow;
font: {
size: 13px;
weight: bold;
}
}
h {
text-transform;
}
}
İkisi Arasındaki Fark Nedir?
- Yukarıdaki koda bakarsanız, bir değişken olduğunu görebilirsiniz.
$colorYellow: yellow;
ve bu değişken, CSS’nin kendisinde “renk” özelliğinin değeri olarak adlandırılır, bkz:
color: $colorYellow;
Bunun gücü, CSS’inizde bir değişkeni arayabilir, ve sonra bu değişkeni kullanan tüm seçicilerin değerini değiştirmek için sadece bu değişkenin değeri üzerinde çalışmanız yeterli olur. Klasik CSS ile fark, tüm seçmenler için bir kez değiştirmek yerine, her bir seçmen için mülkün değerini değiştirmek zorunda olmanızdır.
2. Yukarıdaki iki kodu karşılaştırırsanız, her ikisinde de 3 seçici bulunur, bunlardan ikisi ana seçicinin çocuklarıdır. Kodu okumayı, yazmayı ve sürdürmeyi kolaylaştırır. Yani CSS’de yazmak yerine:
#body {
margin: 0;
}
#body p {
font-size: 12px;
}
SCSS’de şöyle yazabilirsiniz:
#body {
margin: 0;
p {
color: $colorYellow;
font-size: 12px;
}
}
3. Ebeveyn ve çocuk özelliklerinde bölünebilen bazı özellikler için aynı şeyi görebilirsiniz. Örneğin, SCSS’de
font-weight
“font” ebeveyn özelliğinin bir çocuk özelliği olur.
CSS’de:
#body p {
font-size: 13px;
font-weight: bold;
}
SCSS’de:
#body p {
font {
size: 13px;
weight: bold;
}
}