- Arşiv
- SASS
- CSS
SASS Dersleri 2: Değişken Tanımlama
Abdullah K. · 20 Ağustos 2020 · 1 dk okuma
Değişken tanımlamakta ki amaç aynı kodun birden fazla yerde tekrar etmesi sonucu ileride ki değişikliklerde işleri kolaylaştırmaktır. Örneğin "color: pink;" kodunu sayfamızın birkaç yerinde kullanıldığını varsayarsak tek bir yerden değişimi tüm sayfaları etkileyecektir. Bu işlem değişken tanımlamadan yapıldığında ise ilgili kodun tek tek bulunup değiştirilmesi gerekir. Global scope'ta $ (dolar) işareti ile başlayıp değişken tanımlayabilir ve kullanmaya başlayabiliriz.
Örnek 1 (font tanımlama)
$default-font: Helvetica, sans-serif;
$default-font-size: 16px;
body{
font: $default-font-size $default-font;
}
Örnek 2 (renk tanımlama)
$baseColor: #C5C8D4;
body{
color: $baseColor;
}
DİKKAT: Değişken tanımlarken sayılar ile işlem yapılıyorsa birimleri aynı olmak zorundadır.
Örnek
$size: 5 + 8; //Çıktı = 13
$size: 5px + 8; //Çıktı = 13px
$size: 5px + 8em; //Çıktı = HATA
$size: 5em + 8em; //Çıktı = 13em
Bir sonraki derslerde görüşmek üzere.