SASS ve SCSS'te Değişken Tanımlama

Daha önce herhangi bir programlama dilini kullanan ve ardından front-end geliştirici olup CSS yazımına başlayanlar mutlaka programlama dillerindeki bazı yapıların eksikliğini hissetmiştir. İşte o yapılardan biri de değişkenlerdir.

SASS ve SCSS dosyaları içinde değişken tanımlayarak font isimleri, renk kodları vb yapıların defalarca tekrar edilmesini önleyebiliriz.

SASS ve SCSS'te değişken tanımlamak için değişken isminin başına PHP'deki gibi $ işareti koyulur. Basit bir değişken tanımlama işlemi aşağıdaki gibidir.

SASS için

$degiskenAdi : deger

SCSS için

$degiskenAdi : deger;

Önceki yazımda zaten SASS ile SCSS arasındaki en büyük farkın noktalı virgün ve köşeli parantez kullanımı olduğunu söylemiştim. Gördüğünüz gibi iki yazım arasında sadece noktalı virgül farkı bıulunmaktadır.

O zaman basit bir örnekle devam edelim. İki değişken tanımlayıp, bu değişkenleri farklı stil özelliklerinde kullanamaya çalışalım.

$renk1: red
$renk2: white

.baslik 
    background-color: $renk1
    color: $renk2

SASS'ta yaptığımız bu küçük örnekte $renk1 ve $renk isimlerine sahip iki değişken tanımladık ve karşılarına değerleri yazdık. Oluşturduğumuz bu değişkenleri istediğimiz yerde .baslik class'ında olduğu gibi kullanabilmekteyiz.

Aynı kodların SCSS ile yazımı aşağıdaki gibidir.

$renk1: red;
$renk2: white;

.baslik {
    background-color: $renk1;
    color: $renk2;
}

Gördüğünüz gibi kullanımı birebir aynı sadece yazımda noktalı virgül ve köşeli parantez yazım farklılığı bulunmaktadır.

Yukarıda SASS ve SCSS'te ayrı ayrı yaptığımız iki kod bloğunun çıktısı da aynıdır ve aşağıdaki gibidir.

.baslik {
  background-color: red;
  color: white;
}

Dikkat edin, SASS ve SCSS'te tanımladığımız değişken isimleri CSS çıktısında görülmemektedir. Çünkü SASS ve SCSS'te yazılan her satır derlenerek CSS çıktısı haline getirilir.

Başka bir örnekle devam edelim. Web projelerinde tekrar eden yapılardan biri de font isimleridir. Projelerde genellikle 2-3 farklı yazı fontu kullanılır. Bu duruma bir örnek verelim.

$font1 : 'Open Sans', sans-serif
$font2 : 'Dosis', sans-serif

h1
    font-family: $font1

p 
    font-family: $font2

Örnekte gördüğünüz gibi $font1 ve $font2 adında iki farklı değişken tanımlayıp değer olarak font isimlerini verdik. Ardından bu değişkenleri h1 ve p elementlerinin fontunu ayarlamak için kullandık.

Aynı işlemin SCSS ile yapımı aşağıdaki gibidir.

$font1 : 'Open Sans', sans-serif;
$font2 : 'Dosis', sans-serif;

h1 {
    font-family: $font1;
}

p { 
    font-family: $font2;
}

SASS ve SCSS'te yazdığımı bu kodların CSS karşılığı yani derlenmiş hali aşağıdaki gibidir.

h1 {
  font-family: "Open Sans", sans-serif;
}

p {
  font-family: "Dosis", sans-serif;
}

SCOPE (DEĞİŞKEN KAPSAMI)

Programlamayla ilgilenenlerin daha önce karşılarına çıkan ve SASS/SCSS'te kullanılan kavramlardan biri de Scope'dur. Scope, değişkenin kapsamı demektir. Tanımlanan değişkenin global (genel) mi yoksa local (yerel) mi olduğunu belirtmek için kullanılır. Eğer değişken SASS veya SCSS sayfasında hiçbir class'ın içinde olmadan tanımlanırsa global değişken olur ve her yerde kullanılabilir. Ancak class içinde tanımlanan değişkenler ait oldukları yapı dışında kullanılamazlar.

SASS üzerinden bir örnekle başlayalım.

$boyut : 20px   // Global Değişken

.baslik 
    font-size: $boyut

.metin 
    $boyut: 15px    // Yerel Değişken
    font-size: $boyut

Aynı kodların SCSS'deki karşılığı aşağıdaki gibidir.

$boyut : 20px;   // Global Değişken

.baslik {
    font-size: $boyut;
}
    

.metin {
    $boyut: 15px;    // Yerel Değişken
    font-size: $boyut;
}

SASS ve SCSS'de ayrı ayrı yazdığımız bu iki kod bloğunun çıktısı aşağıdaki gibidir.

.baslik {
  font-size: 20px;
}

.metin {
  font-size: 15px;
}

Gördüğünüz gibi .baslik class'ı içinde kullandığımız $boyut değişkeni global değişkendir ve bu nedenle 20px değeri ile burada derlenmiştir. Ancak .metin class'ı içinde yeniden tanımladığımız $boyut değişkeni ise local yani yerel bir değişkendir ve global değişkender bağımsızdır. Bu nedenle 15px değeri ile derlenmiştir.