tarihinde Fatih Hayrioğlu

Sass’ın ve diğer CSS önişlemcilerinin başlangıçtaki sorunlarından biri de Chrome Developer Tools ve Firebug gibi araçlar ile öğeyi incele dediğimizde kaynak dosyadaki yerini değilde üretilen .css dosyasındaki yerini göstermesidir. Buda bizim için büyük bir sorun.

Hayatımıza ilk giren Firebug’ın en büyük getirisiydi tarayıcı üzerinden düzenleme ve hata ayıklama yapabilmek. Şimdi Sass kullanacağız diye bundan vaz mı geçeceğiz? Tabiki hayır. Çözüm için ilk başta css içinde kullanılan tanımın hangi sass dosyasında ve satırında geçtiğini gösteren yorum satırları çözümü sunuldu.

sass --line-numbers deneme.sass:deneme.css

–line-numbers parametresi yardımı ile

/* line 1, ../sass/deneme.sass */
.deneme {

şeklinde ilgili sass dosyasını ve ilgili satırı gösteren yorum satırıyla çözüm üretebiliyoruz.

Yukarıdaki çözüm her ne kadar sorunumuzu azaltsa da tam bir çözüm oluşturmuyordu. Asıl çözümü Kaynak kod haritaları(Source Map) sağladı.

Kaynak kod haritaları (Source Map) Sass dosyasının derlenmesi ile oluşan CSS dosyası arasındaki haritalama işini gören .map uzantılı json dosyasıdır. Kaynak kod haritası içeriğinde, Sass kaynağının her satırına karşılık gelen CSS satırı bilgisi yer alır.

{
  "version": 3,
  "mappings": ";AAAA,OAAO;EACH,MAAM,...",
  "sources": ["../sass/deneme.sass","../sass/deneme_2.sass","../sass/deneme_3.sass"],
  "names": [],
  "file": "deneme.css"
}

şeklinde bir içeriği vardır. Asıl işi gören mappings kısmıdır. Base64 VLQs ile kodlanmış bilgi içerir. Detayı bizim için önemli değil. Bizim için önemli olan işlevi.

Not: Sass 3.3+ itibaren –sourcemap parametresini kullanmadan source map dosyasını üretiyor.

Kaynak kod haritalarını nasıl kullanacağız?

İşin bu kısmından itibaren tarayıcı potaya giriyor. Bildiğim kadarı ile Chrome, Firefox, Safari ve Internet Explorer 11’in desteği var.

Ben ilk baştan beri kaynak kod haritası desteğini sunan Chrome ile nasıl kullanacağımız göstereceğim.

1 - Chrome DevTools ayarları Chrome DevTools’da Settings - General sekmesinde “Enable CSS source maps” zaten seçili ( eskiden seçili gelmiyordu.) geliyor. “Auto-reload generated CSS” işretlememiz yeterli. Aşağıdaki hareketli gif’teki gibi.

enter image description here

2 - Sass’ı –watch ile çalıştırma İlk yazdığım Sass yazısında bahsettiğim komut satırından Sass’ı çalıştırma kısmındaki gibi.

sass --watch sass/deneme.sass:css/deneme.css

çalıştıralım.

Genelde projelerimizde grunt / gulp gibi araçları kullanıyoruz. Bu araçlarda genelde kullanılan sass eklentilerinin sourcemap parametreleri bulunuyor. Bu parametreyi aktifleştirince bize sourcemap üretiyor.

3 - Chrome DevTools çalışma alanı (workspace) oluşturalım Chrome’un güzel özelliklerinden birisi çalışma alanı oluşturmak. Yakında editörlerin yerini alırsa şaşırmayalım. :)

DevTools’da Settings - Workspace sekmesinden Folders kısmından Add folder… tıklayarak proje dosyalarını seçelim. Chrome bizden ilgili klasör için yetki isteyecektir, izin verelim.

enter image description here

4 - Son adım Son adım olarak haritalanacak kaynak kod dosyasını seçmemiz gerekiyor. Çalışma alanımızdan deneme.sass dosyasına sağ tıklayıp çıkan menüden “Map to network resource.” seçeriz. Açılan menüden kendi dosyamızı seçeriz. Bundan sonra bir popup çıkıp yenileme istediğini bize bildirir. Evet deyip işi bitirelim.

enter image description here

Şimdi hareket zamanı

Tüm bu işleri yaptıktan sonra herhangi bir tanımı tıklayarak kaynak koduna gidip değişiklik yapınca anında sayfamızı yansır. Daha da güzeli yaptığımız değişiklik lokaldeki dosyamızda da aynı aynı anda değişecektir.

Mükemmel bir şey.

enter image description here

Sonuç

Her çıkan yenilik bizim daha hızlı olmamızı sağlıyor. Çalışma ortamımızı ne kadar geliştirirsek o kadar daha hızlı ve iyi işler çıkarırız. Devamlı çalışma ortamamızı yenilemekte fayda var.

Bu arada kaynak kod haritalaması sadece Sass için değil tüm ara derleyici gerektiren yapılar (CoffeeScript, TypeScript, Less, Stylus) için geçerlidir.

Kalın sağlıcakla.

Kaynaklar

tarihinde Fatih Hayrioğlu

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

tarihinde Fatih Hayrioğlu

Compass; Sass’ın araç kutusu gibi tanımlayabiliriz. Önek sorununa çözüm oluşturan mixinleri, otomatik sprite yapma imkanı, dikey hizalama kolaylıkları, kolay ızgara sayfa planları sunan bir Sass araç kutusu olarak tanımlanabilir. Ayrıca eklenti desteği yardımı ile daha fazla geliştirilebilen bir araç kutusu.

Peki ben niye Compass kullanmıyoum. Compass’ın bana sunduğu tüm bu yetenekleri ben grunt / gulp ile halledebildiğim için ben compass kullanmıyorum. Compass proje büyüdükçe yavaşlığa sebep olurken grunt / gulp çözümleri bana bu imkanları daha hızlı sağlaması da cabası.

Önek Çözümü

Compass’ın kolaylıklarından biri önek sorununa çözüm oluşturan hazır mixinleri içinde barındırması.

Önek sorunu CSS3’ün ilk yayılmaya başladığında ciddi bir sorundu ve tüm tarayıcılar için önek üretmek gerekiyordu ancak şu an bir çok özellikte öneksiz kullanım imkanı var. Kalanlar içinde grunt/gulp’ın Autoprefixer eklentisini kullanmak daha mantıklı ya da kendi mixinlerini yazmak.

Sprite

Compass’ın avantajlarından biri de dinamik sprite oluşturma imkanının olması. Sprite resimlerini elle yapmaktansa dinamik oluşturmak güzel bir yöntem ancak bunun için de grunt/gulp eklentileri var. Hem de compass’ın çözümünden daha kolay kullanımı var. spritesmith eklentisi gayet kullanışlı.

Diğer araçlar

Compass’ın sağladığı diğer birkaç aracı da her proje kullanmıyoruz. Kullandıklarımız içinde farklı çözümler oluşturulabilir. Örneğin kolay renk tanımları, yetenekli matematiksel işlemler ve sayfa planlaması için ızgara kullanım kolaylığı.

Sonuç

Sonuç olarak şunu söyleyebilirim ki; bir projeyi kodlarken bütün popüler kütüphaneleri kullanacağız diye bir şey yok. Eğer gerekiyorsa kullanırız, gerekmiyorsa boşa şişkinlik yapmaya gerek yok. Ben yaptığım projelerde compass kullanmıyorum ve hiç de aramadım. Yani tercih meselesi, ama kullanmadan önce iyi bir araştırın sonra karar verin derim. Bu arada mixin yazarken compass’ın dokümantasyonundan yararlanıyorum o ayrı :)

Kalın sağlıcakla.

Kaynaklar