Sass'ta değişken kullanımı

10 Eylül 2015

Sass ve CSS önişlemcilerin en önemli getirilerinden biri değişkenlerdir. CSS4 ile birlikte geliştirilmekte olan değişken tanımı var ancak biraz daha kullanışlı olsa iyi olurmuş. Tarayıcı desteğini beklemeliyiz kullanmak için.

Bir çok programlama dilinden de alışık olduğumuz değişkenleri Sass sayesinde CSS’te de kullanabiliyoruz. Değişkenler, kod içindeki tekrar tekrar yazdığımız şeyleri teke indirmemizi sağlar. Örneğin projemizde kullandığımız van dyke kahverengisi‘ni (Bob Ross’un toprağı bol olsun) 5 yerde (proje büyükse bu sayı daha fazla olacaktır) kullandığımızı düşünün.

body {
    color: #4a4742;
}
...
p {
    color: #4a4742;
}

p a {
    color: #4a4742;
}
...
table td {
    color: #4a4742;
}
...
footer strong {
    color: #4a4742;
}

Şeklinde bir kodumuz olduğunu düşünün bu rengi değiştirmek istediğimizde ya tek tek değiştirmek gerekir yada bul-değiştir ile uğraşmak gerekir. Ancak bunun yerine değişken kullansaydık.

$bob-ross: #4a4742

body
    color: $bob-ross
...
p
    color: $bob-ross

p a
    color: $bob-ross
...
table td
    color: $bob-ross
...
footer strong
    color: $bob-ross

Böylece bir değişiklik yapmamız gerektiğinde tek bir yerden değiştirmemiz yeterli olacaktır. Yukarıdaki kodda gördüğümüz gibi değişken tanımı yaparken ve kullanırken dolar ($) işareti kullanıyoruz.

Değişken kullanmanın diğer avantajı da anlamlı isimlendirme ile kodlarımızı daha anlamlı hale getirebiliyoruz.

color: #4a4742;

tanımı bize bir şey ifade etmezken.

color: $bob-ross-color

tanımı bize anlamlı bir rengi çağrıştırır ve kodlama yaparken her seferinde bu renk ne idi diye araştırmayız.

Değişken isimlendirme

Değişkenlere anlamlı isim vermek kod yazarlarının genelde zorlandığı konulardan biridir. Genel itibariyle isim verirken aşağıdaki kurallara dikkat etmek bize avantaj sağlayacaktır.

  • Değişken adı mümkün olduğunca açıklayıcı olmalıdır. Jenerik isimleri kullanmamalıyız. Okunabilir kodlar için anlamlı isim vermek önemlidir. Örn. dropdown-bg, btn-danger-color vb.
  • Değişken adı mümkün olduğunca kısa olmalıdır. İlk kuralıda dikkate alırsak kısa ve açıklayıcı değişken isimleri tanımlamalıyız sonucuna ulaşırız.
  • Yorum satırı ile belirtmek kaydıyla kısaltma kullanılabilir. Bazen isim vermek çok zor hal alabilir. Biraz açıklayıcı olsun derken uzun değişken isimleri orataya çıkabilir. Bu gibi durumlarda kısaltma kullanılabilir.
  • Olumsuz eklerin kullanılması önerilmez. aktif-alan mantıklı iken aktif-olmayan-alan tanımı çok mantıklı bir kullanım değildir.
  • Tutarlı olun. Örneğin Projenizde bazı yerlerinde İngilizce bazı yerlerinde Türkçe değişken adı kullanmak çok tutarlı bir davranış değildir. Eğer İngilizceye karar verdiyseniz her yerde İngilizce kullanın.
  • Birden fazla şeyi ifade eden isimler yerine o kısmı tanımlayan isimler kullanmayı tercih edin. Örneğin bir sayfada birden fazla menü varsa bir tanesine navigation tanımlamak çok mantıklı değildir. Bunun yerine main-navigation, sub-navigation, footer-navigation diye adlandırmak daha mantıklı.
  • Değişken tanımları için mevcut düzenlerden birini kullanın. Tire -Hyphens- (dropdown-fallback-border), Alt çizgi -Underscores- (dropdown_fallback_border), veya camelCase (dropdownFallbackBorder). Çalışma arkadaşlarınızla bir araya gelip hangisini kullanacağınıza karar verin. Ben tireli kullanımı tercih ediyorum.
  • Değişken isimlendirmenin önemli bir iş olduğunun farkında olun. Hızlıca isim vermek sonradan başınızı ağırtır. Baştan iyi düşünüp isim vermek her zaman iyidir.

Değişken kapsamı (scope)

Sass’ta değişkenler yerel değişkenler ve genel değişkenler olarak kullanılabilir.

// Genel değişken
$bob-ross: #4a4742

.join-us
    // yerel değişken - bob ross alizerin kırmızısı
    $bob-ross: #E32636

    color: $bob-ross

.about
    color: $bob-ross

yukarıdaki kodu derlediğimizde

.join-us {
  color: #E32636;
}

.about {
  color: #4a4742;
}

sonucunu verecektir. .join-us içinde kullanılan değişken sadece kendi alanını etkilerken .about genel değişken değerini alacaktır.

default parametresi

default parametresi (!default) bir değişkene başlangıç değeri atamak için kullanılır. Eğer başka bir tanım yapılırsa değişken o değeri alacaktır, ancak hiç bir değer tanımı yapılmamış ise !default parametresi tanımlanmış değeri alır.

Harici kütüphaneler ve anaçatılar için çok kullanışlı bir özellik. Bir eklenti alıp kullandığınızda orada tanımlı tüm değişkenleri almış olursunuz. Kullandığımız eklentinin sitede kullandığımız değişkenlerini tekrar tanımlayarak özelleştirebiliriz.

Örneğin bootstrap değişken tanımlarında

//** Background color for <body>.
$body-bg: #fff !default;
//** Global text color on <body>.
$text-color: $gray-dark !default;

şeklinde tanımlar bulunur. Biz kendi projemizde bootsrap’i kullanırken body bacground rengini değiştirmek istediğimizde

$body-bg: #ccc;

tanımlarız. Artık body background bizim belirlediğimiz rengi alacaktır. Sitepoint sitepoint.com/sass-reference/variables’teki aşağıdaki örnek gayet açıklayıcı.

$variable: 0
$variable: 1 !default
// 0

$variable: 0 !default
$variable: 1
// 1

$variable: 0 !default
$variable: 1 !default
// 0

global parametresi

Global parametresi (!global) global değişkenleri lokalde değiştirmek için kullanılır.

$variable: 0

.foo
    $variable: 1
    content: $variable

.bar
    content: $variable
    $variable: 3 !global

.baz
    content: $variable

derleme sonucu

.foo {
  content: 1;
}

.bar {
  content: 0;
}

.baz {
  content: 3;
}

Değişken kontrolü

Sass’ta değişken kontrolü için variable-exists, global-variable-exists fonksiyonları var.

Genelde aynı örnek veriliyor bu işi anlatmak için. Mesela google font’tan bir font çekiyorsunuz.

$font-google-prim : 'http://fonts.googleapis.com/css?family=Lato:100,300,400';

bu fontu kullanmak istediğimiz yerde

@if variable-exists(font-google-prim)
  @import url($font-google-prim)

bu şekilde google’dan fonta erişildiğinde font kullanılmış olur.

Sublime Text yardımı

Geçenlerde twitter’dan paylaştığım ipucunu da paylaşayım.

Sonuç

Değişken kullanımı CSS önişlemcilerinin en önemli katkılarının başında geliyor. Alışınca CSS dönmesi gelmiyor insanın.

Kalın sağlıcakla.

Kaynaklar

Daha fazla oku

Avatar Popout Efekti

Avatar Popout Efekti uygulaması Devamını oku

Kapsayıcı sorguları (container query)

29 January 2024 tarihinde yayınlandı.

Renk geçişli ve Hareketli kenar çizgileri

22 January 2024 tarihinde yayınlandı.