Sass - Scss Değişken Tanımlama

sezaialkan
Sezai Alkan Frontend Developer

Sass ve Scss de değişken tanımlama aynı programlama dillerinde olduğu gibi tanımlanabilmektedir. Tanımladığımız bir değişken içerisindeki veriyi kod tekrarının önüne geçerek birden fazla yerde kullanabiliriz.

$str : #343434

.stil
    font-size: 1.1rem
    color: $str

Yukarıdaki örnekte str adında bir değişken tanımladık ve bu değişkene #343434 renk kodu tanımladık artık Sass dosyamız içerisinde her str değişkenini çağırdığımızda bize #343434 renk kodunu geri çevirecektir.

.stil {
  font-size: 1.1rem;
  color: #343434;
}

Yukarıdaki blok ise Sass dosyamızın Css e dönüşmüş halidir.

Değişkenimizin içeriğini daha sonradan değiştirmek ister isek !global ifadesi ile değişkenimizin yeni değerini tanımlayabiliriz.

$str : #343434

.stil
    font-size: 1.1rem
    color: $str

.stilTwo
    $str : #221818  !global
    color: $str

.stilThree
    color: $str 

Yukarıdaki örnekte olduğu gibi str değişkenimizin ilk değeri #343434 olurken stilTwo bloğu içerisinde !global ifadesi ile değişkenimizin yeni değerini #221818 olarak güncellemiş olmaktayız. Eğer !global ifadesini kullanmamış olsaydık sonradan tanımladığımız değeri sadece .stilTwo bloğu içerisinde kullanabilecektir.

Ekran Çıktısı:

.stil {
  font-size: 1.1rem;
  color: #343434;
}

.stilTwo {
  color: #221818;
}

.stilThree {
  color: #221818;
}

Yorumlar

Yorum Yapabilmek İçin Giriş Yapmalısınız.
İlk Yorum Yapan Sen Ol!
Uçur Beni Kahramanım Yukarı Çık
Bu web sitesi çerezleri kullanıyor. Devam ederek çerez kullanımını kabul etmiş oluyorsunuz. Detay

Devam Etmek İçin Giriş Yapın

Kod Hocası İle Paylaşımda bulunabilir, Kendini geliştirebilirsin. Sende Hemen Giriş Yap Aramıza Katıl.

GirişKayıt Ol