compass-logo

Compass nedir ?

Bir önceki makalem olan Sass nedir ? konusuna paralel olarak okumanızı tavsiye edeceğim bu yazımda, kısaca Compass’ın ne olduğundan ve Sass‘ a neler kazandırdığından, sisteminize nasıl kurulacağından ve basitçe nasıl kullanacağınızdan bahsetmek istiyorum. Compass Nedir ? Compass ise sass’ı kapsayan ve bünyesinde onlarca yeni özellik barındıran bir çeşit sass temelli CSS – CSS3 uygulama çatısıdır diyebiliriz. […]

Bir önceki makalem olan Sass nedir ? konusuna paralel olarak okumanızı tavsiye edeceğim bu yazımda, kısaca Compass’ın ne olduğundan ve Sass‘ a neler kazandırdığından, sisteminize nasıl kurulacağından ve basitçe nasıl kullanacağınızdan bahsetmek istiyorum.

Compass Nedir ?

Compass ise sass’ı kapsayan ve bünyesinde onlarca yeni özellik barındıran bir çeşit sass temelli CSS – CSS3 uygulama çatısıdır diyebiliriz. Compass sayesinde Sass’ı daha kapsamlı bir şekilde kullanabiliyorsunuz. Ayrıca compass bünyesinde Blueprint Css Framework‘u de barındırdığından sadece basit css dosyalarının derlemesinden öte uygulamanızın tamamına hükmetmenize olanak sağlıyor.

Bunların yanında, compass kullanırsanız web projenizi stil katmanı daha da yönetilebilir ve sürdürülebilir olacak, CSS3 işlevselliklerinden faydalanmanız daha da kolaylaşacaktır. Evet konuya henüz çok hakim olmadığımdan şimdilik anladığım kadarıyla yazabileceklerim bukadar. Dlerseniz kurulum ve kullanıma geçelim;

Compass nasıl kurulur ve kullanılır ?

Compass’ ın kurulumu da en az sass kadar kolaydır. Bir terminal açın ve aşağıdaki adımları izleyin;

$ gem update --system
$ gem install compass

İl satır gem reponuzu günceller.
İkinci satır ise compass gem’i sisteminize kurar. Eğer kurulum sorunsuzca tamamlandıysa compass -v ile kurulumu kontrol edebilirsiniz.

En temel haliyle bir compass projesi oluşturmak için ise aşağıdaki adımları izleyin;

$ compass create project_name

Yukarıdakı satır ise project_name isminde bir dizin oluşturacak ve içerisine sass, stylesheets adında iki dizin ve bunların içlerine ie.scss/css, print.scss/css, screen.scss/css dosyalarını oluşturacaktır. Aynı zamanda kök dizine bir de config.rb adında bir konfigurasyon dosyası oluşturacaktır.

Dizinlerden den anlaşılacağı üzere sass dizinlerinde yapacağınız her yeni dosya oluşturma yada mevcut dosyaları değiştirme işlemleri stylesheets dizinini ve içinde bulunan css dosyalarını etkileyecektir. Burada işler Sass’daki mantıkla yürüyecektir. (Düzenleme ve derleme döngüsünden bahsediyorum)

Config.rb dosyasının içerisinde ise aşağıdakı satırları göreceksiniz;

# Require any additional compass plugins here.

# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "stylesheets"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "javascripts"

# You can select your preferred output style here (can be overridden via the command line):
# output_style = :expanded or :nested or :compact or :compressed

# To enable relative paths to assets via compass helper functions. Uncomment:
# relative_assets = true

# To disable debugging comments that display the original location of your selectors. Uncomment:
# line_comments = false

# If you prefer the indented syntax, you might want to regenerate this
# project again passing --syntax sass, or you can uncomment this:
# preferred_syntax = :sass
# and then run:
# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass

Bu dosyada genel hatlarıyla sass, css, images, ve javascripts dizinlerinin ayarları, oluşturulacak css’lerin ne şekilde derleneceği, satırlara açıklamaların eklenip eklenmeyeceği gibi temel ayarları yapabilirsiniz.

Bu işlemlerden sonra iki şekilde css dosylarınızı derleyebilirsiniz.
1. Yöntem;

$ compass compile
unchanged sass/print.scss
unchanged sass/ie.scss
unchanged sass/screen.scss

2. Yöntem ise;

$compass watch
FSSM -> An optimized backend is available for this platform!
FSSM ->gem install rb-inotify
>>> Compass is polling for changes. Press Ctrl-C to Stop.

1. yöntem siz istediğinizde derleme yaparken 2. yöntem değişiklikleri izler ve dinamik olarak derleme yapar.

Kaynaklar:

Evet Compass ile ilgili anlatılacaklar elbette bu kadar az ve basit değil. Ancak ben de bu konudaki çalışmalarıma yeni başladığım için zaman içinde daha kapsamlı makalelerle karışınıza çıkmayı planlıyorum. Bu yazının da faydalı olacağını umuyorum.

İlişkili makale: Sass nedir ?

İyi çalışmalar.