Slicing Hero, saatnya migrasi ke SASS/SCSS
SASS/SCSS akan menyelamatkan waktu slicing design mu dengan lebih cepat, serta code yang efektif.
Bagaikan seorang yang sedang mengalami permasalahan dalam hidup, tak hanya manusia biasa yang butuh pahlawan, kami sebagai warga IT yang sering kali dianggap bisa segala hal, juga membutuhkan penyelamat dalam hidup kami.
#Permasalahan
- Kode css bertumpuk/ panjang
dalam penggunaan css itu sendiri kita tau bahwa kebanyakan orang akan menggunakan 1 file khusus untuk menyimpan semua kode css, cukup simple namun akan menjadi masalah di projek sekala besar, karena css itu sendiri tidak memiliki dokumentasi untuk setiap kodenya dan jika kita melakukan dengan tim, akan sangat mudah terjadi duplikasi kode.
2. Duplikasi
Nah duplikasi ini maksudnya adalah class css yang berbeda namun memiliki properti yang sama, itu terjadi karena kita tidak bisa mengingat banyaknya kode yang telah kita buat. kebayang gak kalau kita bekerja di tim, tidak mungkin donk tim kita tau/hafal kode yang kita buat.
3. Tidak bisa debugging
tak jarang seorang front-end dev sampai pusing dibuatnya karena tidak tau apa yang salah/ error karena membuat hasil dari kodingannya rusak, tidak seperti PHP jika error memiliki pesan seperti
kita harus meraba, apa yang salah dengan css yang kita buat 😥
Diatas ini merupakan permasalahan yang sering terjadi pada kita, khsusnya anak front-end, yang bertugas untuk melakukan slicing design. mungkin beberapa tidak terasa di projek dengan sekala kecil, tapi bagaimana dengan projek sekala besar yang memiliki banyak page yang harus dislicing ?
apa lagi kalau kita membayangkan mengerjakannya dengan tim, yang dimana css itu sendiri tidak memiliki dokumentasi yang jelas. yang terjadi performa kita akan lambat, file yang kita buat bisa-bisa membengkak karena banyaknya kode yang tidak efektif kita tulis, dan banyak lagi deh.
ok, sebelum kita masuk kedalam pembahasan mengapa SCSS/SASS menjadi penyelamat, mimin mau jelasin dikit nih jadi SASS itu sendiri merupakan singkatan dari Syntactically Awesome Style Sheets. SASS adalah sebuah bahasa pra-prosesor (preprocessor) untuk CSS. jadi dapat dikatakan kalau SASS merupakan bahasa yang akan membuat CSS.
Note : buat pombaca jangan terlalu tegang yah, ini bukan sekripsi
#Pembahasan
Ok, sekarang kita akan masuk keronde sebenarnya, mengapa SASS/SCSS bisa dibilang penyelamat bagi kita khususnya anak front-end. mimin akan coba jabarkan beberapa hal yang membuat kita sebagai front-end dev sangat terbantu dengan adanya SASS/SCSS.
- Struktur File 📂
Dalam css nih kita tau kalau seluruh kode yang kita buat akan menjadi satu dalam satu file, sebenarnya kita bisa saja memisah file css berdasarkan bagian yang kita buat seperti contoh dibawah ini.
tapi malah yang terjadi setelah itu apa ? file yang harus di load di bagian HTML akan jadi cukup banyak dan panjang banget, bayangin aja file kodingan kalian akan jadi seperti ini nih.
nah bayangin sendiri deh jika kita pisah semua bagian kita menjadi file sendiri di css, akan cukup banyak dan panjang kan?
mungkin tidak akan terasa jika kita hanya mengerjakan projek sekala kecil, tapi bagaimana jika kita mengerjakan projek yang cukup besar, page yang cukup banyak, tentu akan sangat rentang akan perubahan dan jika kita menggunakan css seperti biasa tentu akan cukup menyulitkan kita dalam menemukan code yang dimaksud untuk melakukan perubahan.
Ok sekarang kita coba lihat kalau menggunakan SASS/SCSS
Dengan menggunakan SASS/SCSS kita dapat melakukan pengelompokan style berdasarkan component yang ingin kita buat seperti card, button, form dan lain sebagainya. hal ini dilakukan agar kita lebih mudah dalam melakukan perubahan maupun penambahan. karena style telah di kelompokan dalam beberapa kategori folder sehingga kita dapat lebih fokus dalam pengerjaan.
Sebenarnya di setiap pembuatan folder tersebut memiliki tujuannya masing-masing, namun saya tidak akan menjelaskannya disini jadi untuk itu kalian bisa baca salah satu artikel tentang struktur folder css yang cukup keren dari tiket. com yang berjudul CSS Arsitektur Tiket.com.
untuk contohnya seperti ini nih
dan yang pasti kita gak perlu ngeload semua file tadi satu persatu kedalam HTML kita seperti css tadi karena dalam SCSS ada fungsi import, yah kalau kalian belajar PHP hampir sama tuh sama fungsi include, jadinya seperti ini
dan tentu saja automatis akan menghasilkan 1 file css, saat kita run SCSS ini, dan file itu aja kok yang kita load di HTML kita dan juga dengan pengelompokan ini dapat meminimalisir kode dengan class berbeda dengan properti yang sama, karena telah tersusun rapi dan akan mudah sekali dibaca.
Mau tau tentang SCSS lebih lengkap ? bisa kunjungi website resminya di https://sass-lang.com/documentation
2. Flow Control
OK, pada bagian ini akan berkaitan dengan hal yang sering kita gunakan kalau sedang berurusan dengan back-end seperti if, for dan lain sebagainya.
Biasanya beberapa fungsi diatas tidak dapat kita gunakan dalam css, namun dengan adanya SCSS ini kita dapat memanfaatkan fungsi tersebut untuk mempersingkat dan mempercepat kita dalam pengerjaan, contohnya seperti gambar berikut
nah contoh gambar diatas merupakan penerapan looping untuk membuat class color berdasarkan warna yang telah kita simpan dalam array, oiyah untuk warna yang di simpan dalam array seperti ini
jadi dalam scss kita juga dapat dengan mudah membuat variable data yang memiliki data seperti array dan dikelurkan dengan looping, sehingga dapat menyingkat waktu penulisan class warna satu persatu. serta jika ingin melakukan perubahan warna kita hanya perlu menambah/ mengubah warna dalam variable tersebut dan automatis seluruh projek kita akan terupdate.
3. Nesting
Dalam css tentu kita mengenal Nesting, nesting sendiri biasanya digunakan untuk membuat css pseudo-element dan css combinators. contohnya saja jika kita memiliki kode HTML seperti berikut.
jika kita ingin mengakses class tersebut akan menghasilkan css seperti berikut
Namun dengan menggunakan SCSS peroses penulisan ini akan lebih cepat karena penulisannya akan menjadi seperti ini
nah kita bisa lihat nih perbedaannya dan bisa kebayang gak kita bisa menulis code dengan sangat cepat karena kita gak perlu lagi menuliskan kata yang sama berulang-ulang.
nah untuk mempermudah kalian mempelajari ini, bisa nih kunjungi beberapa tulisan yang menurut saya cukup bagus, salah satunya ini
Belajar SASS Dasar (Nesting) dari Yogi Prasetya
atau di website resminya di link berikut https://sass-lang.com/documentation/style-rules/parent-selector
ok mungkin mulai tadi kalian bertanya-tanya kok SASS/SCSS ?
mememang beda antara SASS dan SCSS ?
jadi biasanya orang-orang menyebutnya SASS, namun dalam SASS ini menawarkan 2 sintak, yaitu SASS itu sendiri dan SCSS, perbedaan yang cukup kelihatan adalah dalam cara penulisan codenya seperti ini
nah salah satunya itu, dalam SASS dia tidak menggunakan kurung kurawal, sedangkan SCSS menggunakan, mungkin lebih lengkap kalian bisa baca disini Apa perbedaan antara SCSS dan Sass?
4. Debuging
nah ini nih yang paling saya suka jika menggunakan SASS/SCSS kenapa demikian ? karena dengan SASS/SCSS kita bisa lebih mudah dalam debuging, karena saat ada error SASS/SCSS akan memberi tahu kita layaknya PHP kalau error, sebagai contoh seperti ini nih
nah kita bisa langsung tau tuh bagian mana yang salah, beda lagi kalau kita menggunakan css secara umum, pesan error seperti ini seperti hanya sebatas mimpi 😣
#kesimpulan
Jadi kesimpulannya dari semua hal yang kita bahas nih diatas, SASS/SCSS itu sangat luar biasa powerfull untuk membantu kita dalam penulisan css. dengan banyak fitur yang dimiliki SASS/SCSS pasti akan membuat kita ngoding lebih asik, cepat dan tentunya lebih efektif.
Giamana udah tertarik buat migrasi ?
Terimakasih Sudah Berkunjung 😁, jangan lupa Like, Share dan Komen Yah, sampai jumpa di tulisan saya selanjutnya.
