Sass ile Değişken Oluşturma

Bu yazıda Sass ile değişken tanımla hakkında bilmeniz gereken tüm bilgileri bulacaksınız.

Değişkenler, programlama dillerinin kültüründe, veri tutan ve verinin kolay kullanılmasına olanak sağlayan en basit fonksiyonlardır.

Değişkenler yazılım dilleri için çok önemli bir yere sahiptir.CSS’in belki de en büyük eksiklik programlama dillerinden aşina olduğumuz değişkenlerdir.Her hangi bir programlama diline aşina olanlar bilirler, değişkenler veriyi tekrar tekrar kullanmak için oluşturulan bir bakıma veri deposudur.

CSS de bu eksikliği ortadan kaldırmak için Sass gibi bir uzantı dili işimizi görecektir.Sass’ın sağladığı en önemli özelliklerin başında gelen değişkenler, CSS’i programlama dillerine biraz daha yaklaştırıyor.

Normalde CSS de değişken tanımlama diye bir şey yoktur.Bazen aynı veriyi -özellikle kapsamlı projelerde- bir .css dosyasında birden fazla yere yazmak zorunda kalıyoruz.Bu da ister istemez kodlarımızı karmaşık hale getiriyor.Sass değişken tanımlama özelliği ile verileri projemizde daha hızlı kullanabilir ve kodlarımızın daha düzenli olmasını sağlayabiliriz.

Sass ile Değişken Oluşturma

Sass değişkenleri dolar ($) işareti ile başlar ve bir isim verilir.İlk değişkenlerimizi oluşturalım.

/*değişken tanımlıyoruz*/
$kirmizi : #ff0000;
$fontum  : 'Open Sans',sans-serif;

p {
  color: $kirmizi; /* değişkenimizi buraya değer olarak yazdık*/
  font-family: $fontum;
}

a,span {
  color: $kirmizi;
  font-family: $fontum;
}

Yukarıdaki Sass dosyamızı derlediğimiz zaman aşağıdaki CSS kodlarına dönecek.

p {
  color: #ff0000;
  font-family: 'Open Sans',sans-serif;
}

a,span {
  color: #ff0000;
  font-family: 'Open Sans',sans-serif;
}

 

Yukarıdaki örnekte .scss kodlarında ilk olarak bazı tanımlamalar yaptık ve bunları özelliklerin değeri olarak yazdık.Bu tanımlamalara değişken diyoruz.Gördüğünüz gibi CSS tarafından bu değişkenler bulunmuyor.Sadece değişkenlerin değerleri var.

Değişkenlerin Aldığı Veti Türleri

Değişkenler renk,margin,font gibi değerleri tutabilir.Sass değişkenleri bir çok farklı veri türünü (data type) değer olarak alabilir.

String – Metin Değerler
Sass değişkenlerine metin(text) değerler atayabilir.Değer olarak girilecek metin veya metinler çift tırnak veya tek tırnak içierisine alınmalıdır.Genelde hemen hemen bütün programlama dillerinde string değerler tırnak içerisinde kullanılır.

Number – Sayısal Değerler
Sass değişkenleri sayısal (number) değer alabilirler.Değişkenlere verilen sayısal değerler tırnak içerisine alınmaz.Tırnak içerisine alınan sayısal değerler string değeri olur.

Color – Renk Değerleri
Sass değişkenleri CSS de kullanılan renk  yöntemleri ile renk değeri alabilir.Örnekte kullandık zaten.

List – Liste Değerler
Sass değişkeni liste şeklinde birden çok değeri alabilir.Değerler arasında virgül kullanılır.Margin özelliği gibi bazı özellikler birden fazla değer alabilir, bu değerleri değişkene tanımlarken değerler arasına virgül konulmalıdır.

Operator – İşlemler
Sass değişkenleri matematiksel işlemleri ve mantıksal işlemleri değer olarak alabilir.

Neden Değişken Kullanılır

Değişkenler değişken adı ve değişkenin değerinden oluşan yapılardır.Projelerde aynı değeri bir çok yer de kullanacağınız zaman sadece değişkeni kullanmanız yeterli olacaktır.Bu size oldukça zaman kazandıracaktır.

Ayrıca bir projeninzde bir çok yer de kırmızı rengi kullandınız ama bunları mavi yapmak istiyorsunuz.Değişken kullanmadığınızda, kodlarınızdaki bütün kırmızı yerleri bulup tek tek maviye çevirmeniz gerekir.Fakat kırmızı rengi bir değişkene atayıp kullanırsanız, daha sonra bunu mavi renge çevirmek istediğiniz de sadece değişkenin değeri değiştirmenizz yeterli olacaktır.

Bu dersimizde SASS değişken tanımlama konusunu işledik.Değişkenlerin ne olduğunu ve nasıl değişken oluşturacağımızı kod eşliğinde öğrendik.Bir sonraki dersimizde SASS Nesting özelliğini öğreneceğiz.

Bunları da beğenebilirsin