Belajar SASS Dasar (Partials dan Import)

Yogi Prasetya
2 min readFeb 18, 2019

--

Dengan SASS, kita bisa membuat file CSS utuh dengan potongan kecil file-file SASS yang dibagi berdasarkan fungsinya, semisal _button.scss, _navbar.scss, _table.scss.

Daftar Isi:

Pecahan file SASS tersebut kemudian di satukan dalam 1 file utama yang memanggil (mengumpulkan) semua file tersebut menjadi seperti ini.

main.scss

@import 'button';
@import 'navbar';
@import 'table';
@import '/mixins/function'
@import '/vendor/bootstrap'

Penamaan file partiel diawali dengan karakter underscore lalu diikuti dengan formatnya.

Untuk meng-import-nya cukup tuliskan syntax @ import lalu nama file tanpa menuliskan format, begitupun sama pada file yang berada dalam folder.

Kesimpulan

Idenya sederhana, dan sangat mudah dipahami. Namun kalian harus tetap hati-hati dalam menentukan (memecah) file-file tersebut.

Salah-salah justru member tim atau bahkan kita sendiri yang kebingungan.

Untuk project besar, tentu sangat dimudahkan dengan adanya fitur ini, kita dapat dengan mudah me-maintain file CSS kita dengan menggunakan teknik ini.

Semakin besar project yang kita kerjakan, maka semakin harus baik pula arsitetur CSS kita. Untuk pengetahuan lebih lanjut, silahkan baca atikel tulisan Moch. Zamroni yang bercerita tentang CSS Arsitektur pada Tiket.com, saya fikir sangat bermanfaat untuk dibaca.

Akhir kata, jika ada pertanyaan atau apapun terkait tulisan ini, feel free untuk kontak saya melalui sosial media, saya sangat terbuka untuk diskusi jika memang saya mampu menjawab pertanyaanya.

--

--