Struktur Folder SASS

Setelah sebelumnya saya menulis tentang fitur dasar SASS yang harus kita ketahui, kali ini saya akan mambagikan sedikit pengalaman saya dalam mengatur struktur folder projek SASS. Bagi kalian yang belum membaca artikel sebelumnya, saya sarankan membacanya terlebih dahulu di sini, untuk mempermudah memahami artikel saya kali ini.

Hmmmmm, mungkin kalian akan bertanya, penting ga sih mengatur struktur folder SASS? Untuk projek SASS yang hanya menampilkan satu halaman template, maka jawaban dari saya adalah tidak penting, karena kita bisa menyimpan syntax-syntax SASS dalam 1 file saja misalnya styles.scss. Namun saya lebih suka membuatnya menjadi 3 file (file-file favorit yang sering saya pakai), yakni _variables.scss untuk menyimpan variables, _mixins.scss untuk menyimpan mixins serta _global.scss untuk menyimpan global styles (headings, anchor, sections dan lain-lain), kemudian ke-3 file tersebut di-import ke dalam styles.scss.

Sedangkan untuk projek SASS yang digunakan untuk membangun suatu website yang memiliki banyak page, maka jawabannya adalah mengatur struktur folder SASS itu penting. Coba bayangkan apabila variable, mixin serta seluruh style yang kita buat berada dalam satu file hingga mencapai ribuan baris code, tentu saja kita akan pusing dibuatnya ketika akan melakukan pengubahan style.

Berikut adalah struktur folder SASS yang pernah saya buat pada awal-awal belajar SASS.

+ base
  - _variables.scss
  - _mixins.scss
  - _global.scss
+ components
  - _components.scss
  - _buttons.scss
  - _forms.scss
  - _grids.scss
+ layouts
  - _headers.scss
  - _footer.scss
+ pages
  - _static.scss
- styles.scss

Jika kalian perhatikan dengan seksama, struktur folder SASS yang saya buat tersebut cukup sederhana, sehingga dapat dengan mudah dipahami, semoga saja. Seperti terlihat di atas, saya membagi struktur SASS menjadi 4 folder yakni base, components, layouts dan pages.

Base, folder ini saya gunakan untuk menyimpan 3 files favorite seperti yang sudah saya jelaskan pada paragraf ke-2 di atas.
Components (optional), folder ini saya gunakan untuk menyimpan file-file yang berisi style untuk setiap komponen HTML seperti button, forms, grids dan lain sebagainya. Lalu semua file akan saya import ke dalam _components.scss. Berikut isi dari file _components.scss.

Layouts (optional), folder ini saya gunakan untuk menyimpan 2 file yang berisi style untuk header dan footer.
Pages (optional), folder ini saya gunakan untuk menyimpan file yang berisi style untuk page tertentu, misalnya static page atau page yang lainnya.

Kemudian setiap file pada masing-masing folder tersebut saya import ke dalam styles.scss, sehingga terlihat seperti berikut ini.

Lalu bagaimana jika kita hendak menggunakan file SASS dari sumber lain misalnya Bootstrap? Pada umumnya para front end web developer menambahkan sebuah folder dengan nama vendors dan menaruh file SASS tersebut di dalamnya.

Berikut contoh menggunakan mixins dari Bootstrap, kita hanya perlu menambahkan file _mixins.scss dan folder mixins (beserta seluruh file SASS yang ada di dalamnya).

...
+ pages
  - _static.scss
+ vendors
  + bootstrap
    - _mixins.scss
    + mixins
      - _alerts.scss
      - _background-variant.scss
      ...
- styles.scss

FYI, file _mixins.scss berisi syntax import semua file SASS yang ada di dalam folder mixins. Sehingga kita hanya perlu meng-import file _mixins.scss ke dalam file utama SASS.

Nah dengan membuat struktur folder seperti ini, maka projek SASS kita pun terlihat lebih rapi, sehingga dapat mempermudah kita saat akan melakukan pengubahan di kemudian hari.

Dan demikianlah sedikit tulisan saya kali ini, semoga mudah dipahami dan semoga bermanfaat. Dan jangan lupa, tunggu artikel saya selanjutnya ya.

“SASS, Makes CSS Fun Again”