Sass - Scss Değişken Tanımlama

Sezai AlkanFrontend Developer

Sass-Scss #scss #sass #css

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;
}