Frontend dünyası geliştikçe, klasik CSS dosyalarının yönetimi özellikle büyük projelerde zorlaşmaya başladı. İşte tam bu noktada SASS (Syntactically Awesome Style Sheets) ve onun popüler söz dizimi olan SCSS, projelerde stil düzenini çok daha modüler, okunabilir ve yönetilebilir bir hale getiriyor. Bu yazıda SCSS/SASS’in ne olduğunu, neden kullanıldığını ve Laravel projelerinde nasıl çalıştığını adım adım ele alacağız.

🧩 SASS / SCSS Nedir?

SASS, CSS’in yeteneklerini genişleten bir CSS önişlemcisidir. Normal CSS’in yapamadığı işleri yapar ve daha sonra derlenerek klasik CSS’e dönüşür. SCSS ise SASS’in günümüzde en çok kullanılan sözdizimidir.

Basitçe özetlemek gerekirse:

• SCSS yazarsın ✅
• Derleme aracı CSS’e dönüştürür ✅
• Tarayıcı sadece CSS görür ✅

🚀 Avantajları Nelerdir?

SCSS’in sağladığı önemli özelliklerden bazıları şunlardır:

$primary: #4f46e5;

.button {
  background: $primary;
  color: #fff;

  &:hover {
    opacity: .8;
  }
}

Aynı kodun normal CSS hâli:

.button {
  background: #4f46e5;
  color: #fff;
}
.button:hover {
  opacity: .8;
}

🛠️ Laravel’de SCSS Nasıl Kullanılır?

Laravel, Vite yapısı sayesinde SCSS’yi doğrudan destekler. Tek yapman gereken terminalde SCSS derleyicisini kurmaktır:

npm install --save-dev sass
Daha sonra resources/scss/app.scss oluşturup, resources/js/app.js içinde import etmen yeterlidir:

import ‘../scss/app.scss’;

Son adım:

npm run dev

Ve SCSS dosyaların otomatik olarak CSS’e derlenir.

🎯 Neden Laravel Projelerinde SCSS Kullanmalıyız?

• Orta ve büyük ölçekli projelerde stil karmaşasını önler
• Tema ve component yapısını daha okunabilir yapar
• Tekrarlayan kodları azaltır
• Bakımı kolaylaştırır
• Ekip çalışmalarında standart bir yapı sağlar

✅ Sonuç

SCSS, Laravel projelerinde stil yönetimini modernleştirmek için harika bir çözümdür. Hem daha az kod yazdırır hem de kodun gelecekte genişletilebilir olmasını sağlar. Eğer hâlâ klasik CSS ile ilerliyorsanız, projelerinizde SCSS’i denemeye başlamak için tam zamanı.