SASS ile Dinamik CSS Yazmak

25 Ağustos 2015

Üç adet popüler CSS önişlemcisi var. SASS, LESS ve Stylus. Dinamik CSS yazımı ile ilgili daha önce Stylus ile ilgili bir makale yazmıştım. Stylus yazımda da belirttiğim gibi bunlardan birini tercih etmek yeterli bence. Birbirlerine olan üstünlükleri çok ayırt edici değil. Sass’ın diğerlerine göre ilk olmak ve çok fazla dokümantasyonunun olması gibi avantajları var. Buna karşı bence Stylus’un yazımı daha kolay. Bir iki nokta üst üste -:- yazmadım diye hata almak hoşuma gitmiyor.

Sahibinden.com‘da Stylus ile kod yazarken mobiwan‘da tercihimiz genelde Sass oluyor. Bende hazır Sass kodluyoruz bir makale yazmanın sırası geldi diye düşünüp bu makaleyi yazmaya başladım. Bu yazım Sass’a giriş niteliğinde olacaktır. Daha sonra zamanım olursa devamı gelir inşallah.

“CSS ile kod yazarken büyük projelerde ne kadar dikkatli olsak da sonunda normal olarak binlerce satırlık kodlar çıkabiliyor. Düzenli olmamız ve Firebug yardımı olsa da bu kodlar içinde dolaşmak ve yönetmek bazı sorunlara neden oluyor. Dinamik CSS burada devreye giriyor.

Dinamik CSS yazımında; değişken tanımı, css fonksiyonları, fazla kod işaretçilerinden kurtarma kalıtsallık ve 4 işlem gibi özellikleri ile bizlere yardımcı oluyor. Kısacası CSS’e dinamik bir yazım olanağı kazandırıyor.”

Stylus yazımdan yaptığım alıntı tüm CSS önişlemcileri için geçerlidir.

Sass Kurulumu

SASS Ruby ile geliştirildiğinden kurulumu için bilgisayarınızda Ruby ve onun paket yöneticisi Gem’in bulunması lazımdır. Mac OS’ta Ruby ve Gem kurulu geliyor. Windows için Ruby Installer indirip kurmanız gerekir. Linux için Rails Ready ‘dan kurabilirsiniz.

Sonrasında komut satırına:

gem install sass

Linux ve Mac Os’ta yetki sorunlarını aşmak için:

sudo gem install sass

yazmak yeterli, Sass’ı kurmuş olduk. Sass’ın yüklenip yüklenmediğini kontrol etmek için;

sass -v

komutunu yazarız. Sonuçta Sass ve sürümünü yazan bir cevap gelirse Sass bilgisayarımıza yüklüdür.

Sass’ın Derlenmesi

Sıra geldi Sass yazmaya küçük bir örnek yazalım ve deneme.sass olarak kaydedelim.

  .deneme
      margin: 0 auto
      width: 150px

Söz dizimine baktığımızda süslü parantez -{}-, noktalı virgül -;- kullanılmıyor. Kod blokları girintiler ile belirlenir. Şimdilik bu kadar ile yetinelim. Şimdi bu kodu CSS’e çevirmemiz gerekiyor. Bunun için çeşitli yöntemler mevcut.

Komut satırından derlemek

CSS’e çevirmek için ilk yöntem komut satırından

sass --watch deneme.sass:deneme.css

yazmak yeterli. Eğer birden fazla dosya var ise ve bir klasör içinde ise;

sass --watch app/sass:public/stylesheets

komutu ile tüm app/sass klasöründeki dosyaları CSS’e çevirebiliriz.

Uygulamalar ile derlemek

Genel itibari ile bu programları sıralarsak

  • Scout: Ücretsiz, Windows/Mac
  • CodeKit: 29$, Mac
  • LiveReload: 9,90$, Windows/Mac
  • Compass.app: 10$, Windows/Mac/Linux

Sublime Text ile derlemek

Diğer editörlerinde benzer bir yetenekleri vardır muhtemelen. Ben Sublime Text kullanıyorum diye burada değinmek istedim. Sass kullanıyorsanız bir kaç Sublime Text eklentisi kurmanız gerekiyor.

Grunt ve Gulp yardımı ile derlemek

Grunt ve Gulp, Sass derlemek için biçilmiş kaftandır. Yukarıdaki çözümler seçenek olması için anlatıldı. Asıl çözüm Grunt ve Gulp ile yapılandır.

Grunt ve Gulp’dan kısaca bahsedersek; tekrarlayan işlerimizi otomatize eden Nodejs üzerinde çalışan kod betikleridir. İleride zamanım oldukça daha detaylı bahsetmeye çalışacağım.

Burada grunt’tan bir örnek vereyim. Bir kaç tane grunt sass betiği var. grunt-sass bunlarda biri ve tercih edilebilir. Grunt kurulu bir sistemde

$ npm install --save-dev load-grunt-tasks

ve

$ npm install --save-dev grunt-sass

grunt-sass betiği yüklenir. Sonra gruntfile.js

module.exports = function(grunt) {
    grunt.loadNpmTasks('grunt-sass');

    require('load-grunt-tasks')(grunt);

    grunt.initConfig({
        sass: {
            compile: {
                files: {
                    'css/deneme.css': 'sass/deneme.sass'
                }
            },
            options: {
                sourceMap: true
            }
        }
    });

    grunt.registerTask('default', ['sass']);
};

Daha sonra komut satırından

grunt sass

komutu ile sass dosyaları otomatik derlenecektir. Bu işi anlık değişimi yansıtacak bir kod ile daha kullanışlı hale getirebiliriz.

$ sudo npm install grunt-contrib-watch --save-dev

ile izleme betiğini yükleyelim.

module.exports = function(grunt) {
    grunt.loadNpmTasks('grunt-sass');
    grunt.loadNpmTasks('grunt-contrib-watch');

    require('load-grunt-tasks')(grunt);

    grunt.initConfig({
        watch: {
            sass: {
                files: ['sass/deneme.sass'],
                tasks: ['sass']
            }
        },
        sass: {
            compile: {
                files: {
                    'css/deneme.css': 'sass/deneme.sass'
                }
            },
            options: {
                sourceMap: true
            }
        }
    });

    grunt.registerTask('default', ['sass', 'watch']);
};

sonrasında

grunt

komutunu yazdıktan sonra sass/deneme.sass dosyasında değişiklik yaptımız anda otomatik derlenip css/deneme.css dosyası oluşturulacaktır.

➜  yeni-proje  grunt
Running "sass:compile" (sass) task

Running "watch" task
Waiting...
>> File "sass/deneme.sass" changed.
Running "sass:compile" (sass) task

Done, without errors.
Completed in 0.428s at Tue Aug 25 2015 12:29:03 GMT+0300 (EEST) - Waiting...

Şimdilik bu kadar zamanım oldukça daha fazla Sass ve Grunt makalesi yazmayı planlıyorum.

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ı.