Mert Özen Her Satırda Daha İleri
Anasayfa Videolar SASS (SCSS): 7-1 Pattern (Klasör Yapısı)
SASS / SCSS

SASS (SCSS): 7-1 Pattern (Klasör Yapısı)

30 Haz 2025 10:58
YouTube'da izle
Açıklama

Bu video, büyük ölçekli ve ekip tabanlı projelerde düzeni, okunabilirliği ve modülerliği sağlamak için kullanılan 7-1 Pattern (klasör yapısı) mimarisini detaylı bir şekilde incelemektedir (0:11-0:28).

7-1 Pattern Yapısının Temel Klasörleri (0:47-3:42)

Bu yapı, scss ana klasörü altında şu 7 alt klasör ve bir main.scss dosyasından oluşur:

  • Abstracts: Değişkenler, mixinler ve fonksiyonlar gibi temel araçların tanımlandığı soyut klasör.
  • Base: Reset CSS ve temel tipografi ayarları gibi projenin genelini etkileyen yapılandırmalar.
  • Components: Butonlar, kartlar veya navigasyon çubukları gibi yeniden kullanılabilir UI parçaları.
  • Layout: Header, footer ve ızgara (grid) sistemi gibi projenin iskeletini oluşturan yapılar.
  • Pages: Ana sayfa veya iletişim sayfası gibi belirli sayfalara özel stiller.
  • Themes: Dark veya light mod gibi tema tabanlı tanımlamalar.
  • Vendors: Bootstrap gibi dışarıdan dahil edilen üçüncü taraf paketler.
  • Main.scss: Tüm bu dosyaların tek bir noktada birleştirildiği ana giriş dosyası.
Uygulama ve İpuçları (4:00-10:45)

Video, VS Code üzerinde bu yapının nasıl oluşturulacağını adım adım göstererek, partial dosyaların (alt çizgi ile başlayanlar) neden kullanıldığını (tekil çıktı üretmemeleri için) ve main.scss içinde forward kullanılarak dosyaların nasıl birleştirildiğini uygulamalı olarak anlatmaktadır. Ayrıca, projenin derleme süreçleri ve dosya modülerliği hakkında pratik bilgiler sunmaktadır.

Etiketler