Sass mı SCSS mi

3 Eylül 2015

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

CSS Değişkenleri (Custom Properties)

CSS Değişkenleri (Custom properties - Custom Variables) hakkında bilmeniz gerekenler. Devamını oku

ES6 ile DOM'dan bir eleman silmek

15 May 2018 tarihinde yayınlandı.

Tarayıcı Dünyası

07 May 2018 tarihinde yayınlandı.