Compass ve Sprite Helper

Bir arayüz geliştirici olarak neredeyse hepimiz çeşitli front-end framework’ler kullandık, kullanıyoruz. Framework kullanmamızdaki genel sebep arayüzün semantikliğini sağlamakla birlikte çeşitli mixin’lerden ve grid sistemlerinden yararlanmak. Bazı durumlarda projenizde front-end framework kullanmaktansa compass ve compass ile birlikte kullanabileceğimiz grid sistemleri kullanabilirsiniz (bknz. Singularity, Susy).


Compass nedir?

Compass, içinde css yazmaya yardımcı olan mixinler, fonksiyonlar barındıran bir css framework’üdür. CSS framework’ü olduğu için Bootstrap veya Foundation gibi component’lar barındırmazlar. Compass, sass kullanır. Hâliyle siz de sass kullanırsınız.

Compass kurulumu

Compass’ı kurabilmeniz için bilgisayarınızda ruby’nin kurulu olması geremekte. Ruby‘nin sitesine girip yönergeleri izleyerek ruby’i kurabilirsiniz. Ruby’i bilgisayarınıza kurduktan sonra terminali açıp gem install compass satırını yazıp çalıştırdığımızda compass bilgisayarınıza kurulacaktır.

Bu arada kurulum ile ilgili daha ayrıntılı bilgi için compass’ın kurulum sayfası'na göz atabilirsiniz. Eğer terminal üzerinden çalışmayı sevmiyor veyahut sıkıntı yaşıyorsanız compass için Compass.app‘i veya Scout‘ı kullanabilirsiniz.

Compass’ın kurulumunu tamamladıktan sonra sıra compass ile yeni bir proje oluşturmaya ve yavaştan compass’ı kullanmaya geliyor.

Compass ile compile etmek

Compass ile yaptığımız projemizi önizleyebilmek için hâliyle compile etmemiz gerekmekte. Compile etme işlemini terminal üzerinden projemizin ana dizininde compass compile komutunu çalıştırarak gerçekleştirebiliriz. Fakat her dosya değişikliği sonuçunda compass compile komutunu çalıştırmak yerine compass watch komutunu kullanarak projenizin değişiklikler doğrultusunda izlenerek otomatik olarak derlenmesini sağlayabilirsiniz.

Compass ile proje başlangıçı

Yine terminalimizden compass create project-name diyerek compass ile yeni bir proje yapısı oluşturalım. Az önceki compass komutunu hangi dizinde çalıştırdıysanız o dizine project-name adında bir klasör oluştu. project-name klasörünün içinde ise sass ve stylesheets adlarında iki klasör ve config.rb adında bir ruby dosyası oluşturulduğunu göreceksiniz. sass adlı klasörde yazacağımız sass dosyaları, stylesheets adlı klasörde ise sass klasörü altında bulunan dosyaların derlenmiş/compiled hâlleri var. config.rb dosyasında ise compass ile projemizi compile ederken kullanılacak olan ayarlar mevcut. Bunlardan bazıları;

css_dir: sass dosyalarımızın compiled hâllerinin yani .css dosyası şeklinde hâllerinin bulunacağı dizinin yolunu barındırır.

sass_dir: sass dosyalarımızın hangi dizinde olduğunu belirttiğimiz değişken. Sonuçta projemizi compass ile compile ederken compass’ın sass dosyalarımızı compile edebilmesi için sass dosyalarımızın hangi dizinde bulunduğunu bilmeli.

output_style: compass’ın sass dosyalarını compile etme biçimini belirtiyoruz buraya. Burada dört seçeneğimiz mevcut. Bunlar; :expanded, :nested, :compact ve :compressed. Projemizi yayına alacağımız zaman bu ayarı :compressed olarak belirtip compile etmek yararımıza olacaktır. Fakat geliştirme süresi boyunca diğer 3 seçenekten hangisi sizin için daha faydalı ise durumunuza göre onu seçebilirsiniz.

Compass ile mixins kullanımı

Öncelikle compass sayesinde kullanabileceğimiz bütün mixinlerin, fonksiyonların code reference adlı sayfada bulunmakta. Projeyi her halükarda terminal üzerinden compass ile compile ediyoruz zaten deyip compass’ı direkt kullanmaya başlayamıyoruz. Compass’ı kullanacağımız sass dosyasına compass’ı import etmemiz gerekiyor. Compass ile projeyi oluşturduğumuzda sass klasörünün altına gelen screen.scss adlı dosyamıza @import "compass" diyerek compass’ı genel anlamda projemize dahil etmiş bulunuyoruz. Fakat @import "compass" deyişimiz bizi kesinlikle yanıltmasın. Compass’n bütün nimetlerinden hâlen daha faydalanamamaktayız. Şu anda sadece css3, typography ve utilities modüllerini projemize import etmiş bulunduk. Import edilmeyen iki modül kaldı. Bunlar ise reset ve layout modülü. Compass’ın reset modülü tahmin edebileceğiniz gibi Eric Meyer’in resetleme tekniğini kullanmakta. Reset modülü kesinlikle dahil etmek isteyeceksinizdir. Bunun için dosyanızın başına @import "compass/reset" demeniz yetecektir.

Compass’da mixinleri kullanma şeklimiz sass’taki gibi hâliyle. @import mixin-adi(arg1, arg2); şeklinde istediğimiz mixin’i kullanabiliriz. Compass’ın mixin’lerinin kullanarak yaptığım minik bir animasyon;

See the Pen Google+ Jingle by Ali BARIN (alibarin) on CodePen.

Her şey iyi, güzel. Dahası var mı? Hâlen daha compass’ın bütün nimetlerinden faydalanmış değiliz. Devam edelim..

Compass’ın Sprite Helper’ı

Compass’ın bize sunmuş olduğu sprite helper’ı bulunmakta. Burada söz konusu olan durum sadece belirtilen imajların birleştirilip tek dosya şeklinde sprite hâle getirilmesi değil. Buradaki durum; belirtilen bütün imajların tek dosya hâline getirilip compass yardımıyla sass kodunun da çok rahatlıkla sorunsuzca yazılması.

Örneklendirecek olursak eğer arayüzümüzde kullanmak istediğimiz ve kullandığımız bütün ikonları img/icons dizininde barındıralım. Fakat biz ikonların adreslerini belirtirken img/ kısmını yazmayacağız, çünkü config.rb‘de images_dir değişkeninde belirttiğimiz dizinin altında aranacak yazacağımız imaj adreslerimiz. Compass kullanmadan önce ya üçüncü parti araçlara başvurup sprite’lar ve oluşturulan sprite’ları kullanabileceğimiz kodlar oluşturmaktaydık ya da tamamen insan güçüyle bütün ikonları tasarım esnasında sprite dosyası oluşacak şekilde bir dosyada barındırıp ikonların css kodlarını yani class’larını tek tek elle yazıyorduk.

Şimdi ise compass ile..

$icons-sprite: sprite-map('icons/*.png');

.icon {
  background-image: $icons-sprite;
  display: inline-block;
}

@each $icon in sprite-names($icons-sprite) {
  .icon-#{$icon} {
    background-position: sprite-position($icons-sprite, $icon);
    height: image-height(sprite-file($icons-sprite, $icon));
    width: image-width(sprite-file($icons-sprite, $icon));
  }
}

bu kadarcık kod ile bütün ikonları tek bir dosya altında birleştirip sprite hâline getirebiliyor ve ikonların class’larını dosya adlarına göre oluşturup oluşan sprite dosyasına göre background position’larını ve boyutlarını dinamik olarak belirleyebiliyoruz.

Kodu ele alacak olursak; $icons-sprite: sprite-map('icons/*.png') ile icons dizini altında bulunan bütün .png uzantılı ikonları birleştirip sprite hâline getirdik. Artık $icons-sprite adlı değişkenimiz sprite dosyamızın adını url(path) şeklinde tutmakta. .icon’a kendini tekrar eden kodlardan kaçınmak içn sprite imajını background-image olarak tanımlayıp .icon’ları <i/> elementinde kullanmaya karşın görünebilir olsunlar diye display: inline-block; özelliğini tanımladık.

Ama bütün ikonların class’larını otomatik olarak nasıl oluşturduk? Bu kısımda sass’ın sunmuş olduğu each direktifinden ve compass’ın sprite helper içinde barındırdığı diğer fonksiyonlardan faydalandık. Buradaki @each, javascript’teki forEach gibi. sprite-names($icons-sprite) diyerek $icons-sprite altında oluşturmuş olduğumuz sprite’taki bütün ikonların dosya adlarını liste hâline getirdik. Ve listedeki her bir elemanı döngü misali tek tek döndürerek $icon değişkenine atayıp içindeki kod bloğunda işledik. .icon-#{$icon} kısmında dinamik şekilde class isimleri oluşturup her bir ikonun class’larını oluşturmuş olduk. sprite-position($icons-sprite, $icon) fonksiyonuna gördüğünüz gibi birinci argümanına oluşturmuş olduğumuz sprite dosyasını, ikinci argümanına ise pozisyonunu istediğimiz ikonu belirttik. Bu fonksiyon bize 0 -32px gibi değerler döndüğü için bu değerleri direkt ikonun background-position özelliğine tanımladık. image-width ve image-height ‘tan anlaşılacağı üzere sprite-file ile yakaladığımız ikon dosyasının genişlik ve yükseklik değerlerini alıp ikon class’ının height ve width özelliklerine tanımlayarak ikonumuzu dinamik şekilde oluşturmayı tamamlamış olduk.

Sprite helper’ının sonuçunda göreceğimiz örnek çıktı;

.icon {
  background-image: url('../img/icons-s18747cf5fd.png');
  content: url('../img/icons-s18747cf5fd.png');
  display: inline-block;
}

.icon-8ball {
  background-position: 0 0;
  height: 32px;
  width: 32px;
}

.icon-alert {
  background-position: 0 -32px;
  height: 32px;
  width: 32px;
}

.icon-app {
  background-position: 0 -64px;
  height: 32px;
  width: 32px

Compass’ın helper functions adlı sayfasında diğer yardımcı fonksiyonlara bakıp arayüz taraflı işlerinizi daha organize ve rahat şekilde yapabilirsiniz.

Bu yazının sonuçunda ortaya çıkan örneğin kodlarına yazının github reposu üzerinden ulaşabilirsiniz.

:)