May.27

Grunt Dersleri 9: SASS’ı CSS’e Derleme

Bir web arayüz programcısı olarak SASS’ı ucundan az da olsa duymuşsunuzdur. SASS, CSS’in biraz daha gelişmiş ve biraz daha pratik bir halidir. Hızlı ve çevik kod geliştirme sürecinde artık CSS’ten ziyade SASS ile önişlemci mantığı ile CSS kodları yazılıyor. Buradaki mantıkla; CSS’teki bir takım notasyonları, yani süslü parantezler, noktalı virgüller gibi işaretleri kullanmadan, bazen de değişken tanımlayarak stil yazım kuralları oluşturulmuştur. Ancak unutmayın ki sadece yazım aşamasında SASS kullanılır. SASS dosyaları mutlaka CSS’e dönüştürülmelidir.

SASS’ta süslü işaretler yerine Tab girintileri önem kazanır. Satır atlaması olduğunda da otomatik olarak noktalı virgül olarak değerlendirilir. SASS-CSS dönüşümleri hakkında pratik yapmak isterseniz http://css2sass.herokuapp.com/ adresini kullanabilirsiniz. Aşağıda bir de örnek bir dönüşüm yer almaktadır.

Yükleme komutu:

npm install grunt-sass –save-dev

JS Ekleme Komutu:

grunt.loadNpmTasks(‘grunt-sass’);

Örneğimizde sass klasöründe 2 adet sass dosyamız var. Bunları alıp, css klasörüne dönüştürülmüş halleri ile css formatında atacağız.

sass: {
compile: {
        files: {
                 'css/body.css': 'sass/body.sass',
                 'css/sayfa.css': 'sass/sayfa.sass'
        }
}
}

Tanımda files içinde iki satırda dosyaları tanımladık. : işaretinin solunda ‘ ‘ işaretleri içinde css halinde kaydedilecek dosyanın yolu, sağına da dönüştürülecek sass dosyasının yolu yazılır. Birden fazla dosya varsa virgül işareti ile ayrılıp eklenebilir. Eğer bütün dosyaları ve alt dosyaları da tanımlamak isterseniz /** gibi tanımlamalar kullanabilirsiniz. Detaylı bilgi ve diğer parametreleri için eklentinin dokümantasyonunu inceleyin.

İçeriği paylaş:
  • facebook
  • twitter