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

Bower'ı kaldırdık

Arayüz geliştiricileri (Front-end) dünyası çok hızlı bir şekilde güncelleniyor. Her gün birçok kütüphane ve araç çıkıyor ve bazıları kend...… Devamını oku

HTML Öznitelikleri ve DOM özellikleri

22 November 2017 tarihinde yayınlandı.

CSS3 ile resimleri oranını koruyarak sığdırma

20 November 2017 tarihinde yayınlandı.