tarihinde Fatih Hayrioğlu

Sass ile kod yazmaya başlarken ikileme düşüren bir sorun. Sass mı kullansam SCSS ( Sassy CSS - Sass’lı CSS ) mı kullansam tercihidir. Sass ilk kodlanmaya başladığında Haml ile birlikte çıktığı için söz dizimi benzer şekilde uygulanmış ve uzantıları .sass olarak üretilmeye başlanmış. Sonra Sass 3 ile birlikte SCSS kullanılmaya başlanmış. Şu an her ikisine de destek vermektedir. Bir tercih imkanı vermesi güzel ama yeni başlayanlar için bir kafa karışıklığına neden olması da dezavantaj.

SCSS CSS3’ün gelişmiş bir kullanımı olarak sunulmakatadır. Ayrıca SCSS’nin için CSS kodlarını direk ekleme imkanı da var.

Örnekle aradaki farklı inceleyelim.

Sass

// Variable
$primary-color: #FFFFFF

// Mixin
=border-radius($radius)
    -webkit-border-radius: $radius
    -moz-border-radius: $radius
    border-radius= $radius

.my-element
    $color: primary-color
    width: 100%
    overflow: hidden

.my-other-element
    +border-radius(5px)

SCSS

// Variable
$primary-color: #FFFFFF;

// Mixin
@mixin border-radius($radius) {
    -webkit-border-radius: $radius;
    -moz-border-radius: $radius;
    border-radius: $radius;
}

.my-element {
    color: $primary-color;
    width: 100%;
    overflow: hidden;
}

.my-other-element {
    @include border-radius(5px);
}

Kod sonrasında iki tercih arasındaki artılar sıralarsak;

Sass’ın artıları

  • Kısa ve kolay sözdizimi
  • Noktalı virgül, süslü parantez kullanılmıyor; @mixin, @include yerine = ve + kullanılıyor.
  • Daha temiz bir görünüm
  • Blokların seviyelerini daha hızlı düzenleme imkanı

SCSS artıları

  • CSS ile tam uyumluk
  • CSS’e yakın sözdizimi. CSS’den daha hızlı geçiş imkanı
  • Daha düzenli kullanım

sasstoscss gibi çevrimiçi araçlar sayesinde iki seçenek arasında çevirim yapmak kolay. Bence siz hangisinde rahat ediyorsanız onu tercih edin. Ben Stylus’tan geçtiğim için .sass daha kullanışlı geliyor bana.

Error: Invalid CSS after "float: left": expected ";", was ".about {"
on line 2 of sass\example.scss

Gibi bir noktalı virgülü (;) unuttum diye hata almak istemiyorum. Bu arada ekip olarak SCSS kullanıyoruz. Ekibi ikna edebilirsen Sass’a geçeceğiz.

Kalın sağlıcakla.

Kaynaklar

tarihinde Fatih Hayrioğlu

Bir önceki yazımda Sass’a giriş yapmıştık. Bu makale de klasör yapımızın Sass sonrası nasıl olması gerektiğini gösterelim.

Klasör yapısını baştan ayarlamak her zaman iyidir. Her ne kadar ben burada bir yapı sunsam da klasör yapısı geliştiricinin kendi çalışma şartlarına göre esnetip yenilemesi gerekir.

CSS ile kod yazarken dosyaların çok fazla sayıda olması hızı azaltacağı için (HTTP isteklerinin çoğalmasından dolayı) tercih edilmezdi. Ancak Sass ve bezer sistemler derlenip tek CSS çıktısı verdiği için her mantıksal bölüm için bir dosya oluşturmak gerekir. Ayrıca bu dosyaları belirlenen klasörlere taşımak büyük projeler için düzen sağlar.

Kalsör yapısına geçmeden önce CSS’den de bildiğimiz import kuralına değinelim.

Sass’da @import kullanımı

CSS’de de diğer css dosyalarını içeri aktarmak için kullandığımız bu yöntem benzer amaçla ve bazı artı eklemelerle Sass’da da var. CSS’de @import yavaşlığa neden olduğundan dolayı pek tercih edilmezdi. Ancak bu sorunlar Sass’ta olmadığı için burada kullanmakta bir mahsur yok.

Sass import’ta dosya isminin tamamını yazmaya gerek yoktur. Örneğin main.sass dosyasını import ederken

@import "main";

yazmak yeterlidir. .sass / .scss uzantısını yazmaya gerek yok.

Kısmi (partial) Sass dosyaları

Ben Türkçeye kısmi olarak çevirdiğim partial Sass dosyalarını şöyle açıklayabiliriz; Bazı Sass dosyalarının CSS’e çevrilmesine gerek yoktur, diğer Sass dosylarına hizmet eder. Örneğin değişkenler, mixinler vs. Bu dosyalar kısmen derlenir. Diğer Sass dosyaları bu dosyalardaki bilgileri kullanır, ama bu dosyalardaki Sass kodu CSS’e çevrilmez. Kısmı Sass dosyaları alt çizgili ( _ ) ile başlamalıdır. Örnek _variables.sass

$base-font-family: Gibson, Arial, sans-serif;
$base-font-size:   14px;

$spacing-unit:      30px;
$text-color:        #111111;
...

Şeklindeki değişken tanımladığımız Sass dosyasını CSS’e çevirmemiz pek anlam ifade etmez. Ancak bu değişkenleri diğer Sass dosyaları kullanır.

Kısmi Sass dosyalarının import edilirken alt çizginin yazılmasına gerek yoktur.

@import "variables";

Bu ekleme sonucunda Sass derlemesi ile derlediğimizde variables.css dosyası çıkarmaz. Ama biz home.sass dosyamızda $text-color değişkenini kullanabiliriz.

Klasör yapısı

Yaptığım uygulamalardan ve kaynaklar kısmındaki yazıları inceledikten sonra proje boyutlarına göre klasör yapısını oluşturmanın faydalı olacağını düşündüm. Küçük projede klasör yapısı oldukça basit tutulabilecekken, orta halli ve büyük projelerde daha kapsamlı bir klasör yapısının tercih edilmesi önemlidir.

Küçük projeler

_base.sass 
_layout.sass    
home.sass
about-club.sass
join-us.sass

Küçük projelerde klasörlere gerek yok bence. Ortak dosyalar kısmi Sass olarak adlandırılırken (_base ve _layout) her sayfanın farklı Sass dosyaları olabilir.

base.sass: Bu dosya değişkenleri, mixinleri, sıfırlama kodlarını, sprite ve tipografik tanımları içerir. Dosya içinde yorum satırı ile bu bölümler ayrılabilir.

layout.sass: Bu dosya sayfa yapısını oluşturan ana yapıların ve alt yapıların kodlarını içerir. Üst alan (header), alt alan (footer), sol ve/veya sağ alan (side) ve içerik kapsayıcısını içerir. Ayrıca bu alanlar içinde kullanılan küçük yapısal alanlarıda içerir. Menüler, açılır kutular (modal, lightbox), hiyerarşik yerimi (breadcrumb), sayfalama butonları vs.

Sayfalar: Anasayfa ve alt sayfa için ayrı sass dosyaları. Çıktıları ayrı ayrı her sayfaya eklemek mantıklı.

Orta ve büyük çaplı projeler

Genelde projeler bu kategoriye giriyor. Küçük diye başlayan bir çok proje zamanla orta veya büyük ölçekli bir projeye dönüşebiliyor. Kod düzenini sağlamak için her mantıksal alan ayrı bir Sass dosyası olarak kullanmakta yarar var. Benim eriştiğim son yapı aşağıdaki gibidir.

./base
|-- _fonts.sass
|-- _mixins.sass
|-- _reset.sass
|-- _sprites.sass
|-- _variables.sass

./components
|-- _modal.sass
|-- _navigation.sass

./layout
|-- _footer.sass
|-- _header.sass
|-- _layout.sass

./pages
|-- _home.sass
|-- _about.sass
|-- _join-us.sass
|-- _offers.sass

./vendors
|-- _colorpicker.sass
|-- _jquery.ui.core.sass
|-- _swiper.sass

main.sass

Küçük projelerde dosyalar içinde birleştirdiğimiz birimleri tek tek ayrı sass dosyası olarak oluştururuz. Ayrıca bunların dışında bir iki klasörde daha eklememiz gerekti.

base klasörü: Değişken, mixin, renk ve yazı tipi gibi genel tanımların ve sıfırlama dosyasını içeren klasördür.

layout klasörü : Ana yapıyı oluşturuan dosyaları içerir. Örneğin header, footer, sidebar vs.

components klasörü : Ana yapı dışında kalan küçük yapıları içeren klasördür. Kullanıcı arayüzü (UI) öğelerini içeren sass dosyaları vardır. Örneğin, modal, lightbox, breadcrumb vs.

pages: Sayfaların her biri için oluşturulan sayfaya özel kodların bulunduğu sass dosyaları içerir. Örneğin anasayfa (home.sass), hakkımızda, iletişim vs.

vendors: Kullandığımız eklentilerin sass dosyalarını koyduğumuz klasör. Burada şöyle bir durum var. Eğer eklentileri bower ile ekliyorsak eklentileri _bower_components içindeki CSS dosyasını değiştirmeden kendi projemizde eklentinin CSS’lerini ezdiğimiz dosyayı barandırmak mantıklı olacaktır.

main.sass: Yukarıdaki tüm dosyaları içeren ana dosyadır. Bu dosya derlenerek tek bir css dosyasını oluşturur.

Projeye göre bu klasör sayısı değişebilir. İlgili projedeki durumlara göre klasör açılabilir ve silinebilir. Zamanla en iyi klasör yapınızı bulacağınız düşünüyorum.

main.sass dosyamız aşağıdaki gibi olacaktır.

@import "base/variables";
@import "base/mixins";
@import "base/reset";
@import "base/sprites";
@import "base/fonts";

@import "layout/layout";
@import "layout/header";
@import "layout/footer";

@import "components/modal";
@import "components/navigation";
@import "components/top_navigation";

@import "vendors/colorpicker";
@import "vendors/jquery.ui.core";
@import "vendors/swiper";
    
@import "pages/home";
@import "pages/offers-detail";
@import "pages/about";
@import "pages/join-us";
@import "pages/notifications";

Dikkat ettiyseniz .sass uzantılarını ve alt çizgileri (_) yazmadık. Sizde yorum kısmında kendi klasör yapınızı paylaşırsanız bir birimizden alabilecğeimiz yapıları kopyalayarak daha iyiye ulaşabiliriz.

Kalın sağlıcakla.

Kaynaklar

tarihinde Fatih Hayrioğlu

Üç 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