Yücel Alkan

SASS 7-1 Pattern Yapısı

Merhaba. Bu yazımda büyük projelerde CSS yazımını ve kontrolünü kolaylaştıran bir yöntemden bahsedeceğim. Bu yöntemin adı SASS 7-1 Pattern'dir. Bu yönteme göre CSS kodları tek bir SASS veya SCSS dosyası içerisinde yazılmaz. Dosyalar belirli bir kurala göre parçalanır ve oluşturulan 7 klasör içerisinde saklanır. En son aşamada ise ana klasörde oluşturulan bir ana SASS veya SCSS dosyası içerisinde tüm dosyalar @import komutuyla include edilir. O zaman öncelikle @import komutundan bahsetmek gerekiyor.

@import Komutu

SASS veya SCSS içerisinde @import komutu, bir dosyayı sayfaya eklemek yani include etmek için kullanılır. Kullanımı aşağıdaki gibidir. 

Diyelim ki main.sass ve stil.sass adında iki dosyanız olsun. Main.sass dosyası içerisine stil.sass dosyasını eklemek için aşağıdaki komut kullanılır. 

@import "stil"

Dikkat ettiyseniz dosyanın sonuna uzantısını yazmadım. SASS veya SCSS dosyasını sayfanıza eklediğiniz takdirde uzantısını yazmanıza gerek yoktur. 

Peki stil.sass dosyası bir klasör içinde olsaydı ne olacaktı. Mesela CSS adında bir klasör içinde olsun. O zaman da aşağıdaki gibi bir kullanım gerekecek.

@import "CSS/stil"

Bu yapıyı kullanmanın en büyük avantajı şudur: Stil.sass dosyasını derlemenize gerek yoktur. Main.sass dosyasını derlediğiniz takdirde stil.sass dosyasının derlenmiş hali main.css dosyasına eklenmiş olacaktır. 

Import komutunu gördüğümüze göre SASS 7-1 Pattern yapısına geçebiliriz. 

SASS 7-1 PATTERN YAPISI 

SASS 7-1 Pattern yapısına göre; ana SASS /SCSS dosyası ile birlikte 7 klasör oluşturulur. Ana dosyamızın adı main.sass veya main.scss olsun. 

Bu yapıda klasör isimlerini istediğiniz gibi verebilirsiniz. Birçok geliştirici de kendi yapısını oluşturup, dilediği klasör isimlerini vermektedir. Ancak genel olarak en çok kullanılan klasör isimleri şu şekildedir: abstracts, base, components, layout, pages, themes ve vendors. 

7 farklı klasör oluşturduktan sonra, amacına ve türüne göre SASS ve SCSS dosyaları parçalanıp bu klasörler içerisine yerleştirilir. Peki hangi dosya hangi klasöre yerleştirilir diye merak ediyorsanız aşağıdaki yapıyı inceleyebilirsiniz.

main.sass
|
|--abstracts
|      _variables.sass           // Tüm global değişkenler bu dosyada tutulur
|      _functions.sass           // Tüm fonksiyonlar bu dosyada tutulur. 
|      _mixins.sass              // Tüm mixin tanımlamaları bu klasörde yapılır.
|
|--base
|       _reset.sass               // HTML taglarının stil resetleri bu dosyada yapılır.
|       _typography.sass          // Tipografi yani yazı fontu tanımlamaları
|      ...
|
|--components
|       _buttons.sass             // Buton stilleri burada tanımlanır.
|       _dropdown.sass            // Dropdown (Açılır Menü) stilleri burada tanımlanır. 
|       _carousel.sass            // Carousel, slider stilleri burada tanımlanır. 
|       ...
|
|--layout
|      _header.sass              // header'a ait stil tanımlamaları 
|      _footer.sass              // footer'a ait stil tanımlamaları
|      _navigation.sass          // navigasyon yani menülere ait stil tanımlamaları
|      _forms.sass               // kullandığınız formlara ait stil tanımlamaları
|      _sidebar.sass             // varsa sidebar'a ait stil tanımlamaları
|      _grid.sass                // kendi grid sisteminize ait stil tanımlamaları 
|      ...
|
|--pages
|      _home.sass                // anasayfaya ait stil tanımlamaları.
|      _about.sass               // hakkımızda/kurumsal sayfasına ait stil tanımlamaları
|      _contact.sass             // iletişim sayfasına ait stil tanımlamaları
|      _products.sass            // (varsa) ürünler sayfasına ait stil tanımlamaları
|      ...
|
|--themes
|      _default.sass             // varsayılan temaya ait stil tanımlamaları
|      _dark.sass                // (varsa) koyu temanıza ait stil tanımlamalaarı
|      _light.sass               // (varsa) açık temanıza ait stil tanımlamaları
|      ...
|
|--vendors
|      _bootstrap.sass            // Bootstrap kullanıyorsanız, ona ait sass dosyası
|      ...

Bu yapıya göre tüm SASS/SCSS kodları tek bir dosyada yazılmaz. Amacına ve türüne göre parçalanır ve yukarıda görüldüğü gibi ayrı ayrı dosyalarda tutulur. 

Yukarıdaki yapıyı incelediğiniz zaman aklınıza şöyle bir soru gelebilir: Neden dosyaların başında alt tire _ var? SASS ve SCSS'te başında _ olan dosyalar bağımsız olarak derlenmez, yani göz ardı edilir. Bu dosyalar sadece import edildikleri yerde derlenir. Bu sadece bir sürü gereksiz CSS dosyası oluşmasının önüne geçilmiş olur. 

Peki tutulan bu dosyaları tek bir dosyada yani main.sass veya main.scss dosyasında nasıl birleştireceğiz? Yukarıdaki yapı için main.sass veya main.scss dosyası oluşturursak aşağıdaki gibi olacaktır. 

// Abstract 
@import "abstracts/variables"
@import "abstracts/functions"
@import "abstracts/minins"

// Base 
@import "base/reset"             
@import "base/typography"        

// Components 
@import "components/buttons"
@import "components/dropdown"
@import "components/carousel"

// Layouts 
@import "layout/header"
@import "layout/footer"
@import "layout/navigation"
@import "layout/forms "
@import "layout/sidebar"
@import "layout/grid"

// Pages 

@import "pages/home"                
@import "pages/about"               
@import "pages/contact"             
@import "pages/products"            

// Themes 
@import "themes/default"             
@import "themes/dark"                
@import "themes/light"               

|
// Vendors
@import "vendors/bootsrap.sass"

Burada dikkat etmemiz gereken önemli bir husus vardır. Import işlemi esnasında dosya isimlerinin başında bulunan _ alt tre ve sonunda yer alan uzantıları yazmadık. Zaten kullandığınız editör sayesinde bu dosya isimlerini tek tek yazmak yerine import dediğiniz zaman çıkan açılır listeden seçebilirsiniz. Ben Visual Studio Code kullanıyorum ve otomatik tamamlıyor. Muhtemelen diğer editörler de bu işi yapıyordur. 

SASS 7-1 Pattern Yapısının Avantajları 

En büyük avantajı düzenli çalışma sağlamasıdır. Aradığınız veya düzenlemek istediğiniz kısımları kolaylıkla bulabilirsiniz 

Tüm SASS veya SCSS dosyalarını tek tek derlemeye gerek kalmaz. Siz ana dosyayı yani main.sass dosyasını derlediğiniz zaman @import edilen tüm dosyalar otomatik derlenir. 

Derleme işleminin sonunda tek bir CSS dosyası oluşacağı için HTML sayfasında sadece bir kere ekleme işlemi yapılır. CSS dosyası içinde kullanılan @import komutu, her bir CSS dosyasının ayrı bir istekle getirilmesine yol açacağından, SASS 7-1 yöntemi zaman ve maliyet açısından avantaj sağlar. Çünkü sadece bir CSS dosyası için istekte bulunulacaktır. 

Yukarıda belirttiğimiz şablon bir yapıdır. Projenizin büyüklüğüne göre yukarıdaki yapıyı daha da genişletebilir veya daraltabilirsiniz. Mesela ben Bootstrap dosyalarını CDN üzerinden çektiğim için vendors klasörünü kullanmıyorum. Yine tema seçeneği bulunmayan sitelerde themes klasörünü oluşturmanıza gerek kalmayacaktır. Yanı bu yapıyı projenize göre daraltabilirsiniz. Yine projenizde daha farklı bölümler varsa layout klasöründek dosya sayısını arttırabilirsiniz. Projenizde yer alan tüm sayfalar için pages klasörü içinde daha fazla sass veya scss dosyası tanımlayabilirsiniz. 

Bu içeriğe ait video derse aşağıdan ulaşabilirsiniz.

Soru ve görüşlerinizi yorum olarak bırakabilirsiniz. Hayırlı çalışmalar dilerim.

Yorumlar
ugur emirmustafa (16 Nisan 2021 - 09:27)
@import yapısı deprecated. https://www.youtube.com/watch?v=CR-a8upNjJ0
Cevapla
Yorum Yapın