SCSS (Sass'ın Sünnetli Sürümü), CSS yazmayı daha güçlü ve esnek hale getiren bir CSS ön işleyicisidir. Değişkenler, SCSS'in sunduğu en önemli özelliklerden biridir ve kodunuzu daha modüler, yeniden kullanılabilir ve bakımını kolay hale getirir. Bu makalede, SCSS'de yerel ve global değişkenlerin nasıl kullanılacağını öğreneceksiniz.
SCSS Değişkenleri Nedir?
SCSS değişkenleri, bir değer atayarak bu değeri kodunuzun farklı yerlerinde tekrar kullanmanızı sağlar. Değişkenler, renkler, font boyutları, marginler ve diğer CSS özellikleri için sabit değerler tanımlamak için kullanılır.
Global Değişkenler
Global değişkenler, SCSS dosyasının herhangi bir yerinde tanımlanabilir ve bu değişkenlere dosyanın her yerinden erişilebilir. Global değişkenler genellikle SCSS dosyasının en üstünde veya ayrı bir dosyada tanımlanır.
Global Değişken Tanımlama ve Kullanımı
Yukarıdaki örnekte, $base-color ve $padding değişkenleri global olarak tanımlanmış ve body elementinde kullanılmıştır.
Yerel Değişkenler
Yerel değişkenler, sadece tanımlandıkları blok içinde geçerlidir. Bu, değişkenlerin kapsamını sınırlayarak global değişkenlerin yanlışlıkla değiştirilmesini önler.
Yerel Değişken Tanımlama ve Kullanımı
Yukarıdaki örnekte, $local-padding değişkeni .container ve .header bloklarında yerel olarak tanımlanmıştır. Bu değişkenler, sadece kendi blokları içinde geçerlidir ve global değişkenleri etkilemez.
Yerel ve Global Değişkenler Arasındaki Farklar
- Kapsam: Global değişkenler dosyanın her yerinde kullanılabilirken, yerel değişkenler sadece tanımlandıkları blok içinde geçerlidir.
- Çakışma: Yerel değişkenler, farklı bloklarda aynı isimle tanımlanabilir ve birbirlerini etkilemezler. Global değişkenler, her yerde aynı ismi ve değeri taşır.
- Kullanım Kolaylığı: Global değişkenler, birden fazla yerde aynı değeri kullanmak için idealdir. Yerel değişkenler ise geçici değerler için uygundur.
SCSS Değişkenlerinin Avantajları
- Bakım Kolaylığı: Değişkenler sayesinde bir değeri tek bir yerden değiştirmek yeterlidir.
- Tekrar Kullanılabilirlik: Aynı değerleri tekrar tekrar yazmak yerine değişkenleri kullanabilirsiniz.
- Tutarlılık: Projenin tamamında tutarlı stil ve değerler kullanmanızı sağlar.
Kod Örnekleriyle SCSS Değişken Kullanımı
Renk Değişkenleri
Font ve Margin Değişkenleri
Medya Sorguları ile Değişken Kullanımı
SCSS değişkenleri, kodunuzu daha modüler, yönetilebilir ve okunabilir hale getirir. Global değişkenler, geniş kapsamlı değerler için kullanılırken, yerel değişkenler sadece belirli bloklar içinde geçerlidir. Bu iki değişken türü, projelerinizi daha esnek ve sürdürülebilir hale getirir. Kod örnekleri ve pratik ipuçları ile SCSS değişkenlerinin gücünü ve kullanım kolaylığını keşfettiniz. SCSS'in sunduğu bu özellikleri kullanarak daha profesyonel ve verimli CSS yazabilirsiniz.