SASS/SCSS Nedir?

İngilizce: SASS/SCSS

Sass/SCSS, değişken, mixin, nesting ve modül yapılarıyla büyük CSS dosyalarını daha düzenli yazmayı sağlayan ön işlemcidir.

Sass/SCSS Nedir?

Sass, CSS yazımını daha programatik hale getiren bir ön işlemcidir. SCSS ise CSS’e çok benzeyen, süslü parantezli Sass sözdizimidir ve güncel projelerde en sık görülen kullanımdır.

Tarayıcılar Sass dosyalarını doğrudan çalıştırmaz. .scss veya .sass dosyaları build sürecinde normal CSS çıktısına derlenir; tarayıcıya bu derlenmiş dosya gönderilir.

Hangi Özellikleri Sunar?

  • Değişkenler: Renk, boşluk ve breakpoint değerlerini tek yerde tutar.
  • Mixin: Tekrarlanan stil bloklarını parametreli hale getirir.
  • Nesting: Seçicileri iç içe yazmayı sağlar; aşırı kullanılırsa CSS çıktısı karmaşıklaşır.
  • Partials ve modules: Stil dosyalarını parçalara ayırıp kontrollü biçimde içe aktarmaya yarar.
  • Fonksiyonlar: Renk veya ölçü hesaplamaları gibi yardımcı işlemleri yapabilir.

İş Dünyasında Kullanımı

Sass, tasarım sistemleri, tema altyapıları ve çok sayıda bileşeni olan web uygulamalarında stil tekrarını azaltmak için kullanılır. Özellikle aynı marka renkleri, spacing sistemi ve component varyantları birçok sayfaya yayıldığında bakım kolaylaşır.

Modern CSS değişkenleri, @layer, :is() ve container query gibi özelliklerle Sass’a duyulan ihtiyaç bazı projelerde azaldı. Tailwind CSS kullanan ekipler de farklı bir stil organizasyonu seçebilir. Yine de mevcut SCSS kod tabanlarını düzenlemek ve büyük tema dosyalarını yönetmek için Sass hâlâ yaygındır.