BERITA TUTORIAL Panduan Cara Menginstall SASS Programming yang Otomatis Refresh di Browser

Panduan Cara Menginstall SASS Programming yang Otomatis Refresh di Browser

Oleh Rizqi Reza Ardiansyah | Senin, 26 September 2022

Panduan Cara Menginstall SASS Programming yang Otomatis Refresh di Browser

Sebagian orang mungkin sudah tidak asing dengan yang namanya CSS (Cascading Style Sheet). CSS digunakan untuk menghias tampilan website agar terlihat lebih menarik. Di artikel ini saya akan membahas lebih lanjut mengenai Pre-processor CSS yaitu SASS.

Yuk, ikuti program inovatif MAGANG ONLINE untuk berbagai bidang seperti animasi, coding, 3D, illustrasi, musik dan bisnis hanya di GAMELAB.ID!

Ciptakan lingkungan belajar yang lebih MENYENANGKAN dengan GAME-BASED LEARNING!

Daftar Isi Artikel

SASS merupakan singkatan dari Syntactically Awesome StyleSheets, yang merupakan salah satu preprocessor terkenal selain LESS dan Stylus. SASS dapat membantu kita mengurangi pengulangan penulisan Tag, Class, dll.

Kemudahan lainnya, SASS tidak perlu kurung buka/tutup dan titik koma di akhir syntax. Dengan begitu, tampilannya terlihat lebih clean secara visual.

Untuk penginstallannya, SASS menggunakan bahasa pemrograman Ruby yang dapat di-install melalui command prompt. Jika kamu ingin menggunakan aturan penulisan SASS, kamu bisa mengunjungi website resminya SASS.

Meski lebih clean secara visual, SASS tidak lebih populer dari SCSS (Sassy CSS). SCSS cenderung lebih banyak digunakan oleh developer karena memiliki aturan penulisan yang lebih ramah sesuai dengan aturan CSS. Maka dari itu, di sini saya akan menggunakan SCSS sebagai bahan praktek namun dengan kekuatan yang dimiliki oleh SASS.

Apa Perbedaan SASS dan SCSS ?

Perbedaan terbesar antara keduanya adalah SASS menggunakan ekstensi file .sass. Aturan SASS tidak menggunakan kurung buka atau tutup, dan SASS juga tidak menambahkan titik koma di akhir syntax.

Sedangkan SCSS berekstensi file .scss. Aturan SCSS menggunakan kurung buka atau tutup dan di akhir syntax harus menambahkan titik koma sebagai penutup. Berlawanan dengan SASS, SCSS lebih mudah untuk dibaca karena memiliki aturan yang sama dengan yang ada di CSS yaitu harus menambahkan kurung buka/tutup dan titik koma sebagai penutup.

Karena alasan inilah, penulis merekomendasikan untuk menggunakan SCSS karena lebih mudah di baca dan sangat mirip dengan native CSS. Pada tutorial ini, saya juga menggunakan SCSS yang memiliki kekuatan dari SASS.

Berikut adalah contoh perbedaan dari aturan penulisan SCSS dan SASS.

Baca Juga : Cara Menggunakan BGM pada Game Phaser JS

Bagaimana Cara Penginstalannya ?

1. Download Node JS terlebih dahulu di website resminya, di tutorial ini saya menggunakan versi 16.13.1 LTS. Kita akan menggunakan NPM (Node Package Manager) yang  dimiliki oleh Node JS.

2. Setelah itu cek versi Node JS dengan mengetikan npm --v, untuk memastikan proses instalasi berhasil melalui terminal yang ada di VS code sebagai berikut:

3. Lalu ketikkan npm init -y, untuk membuat sebuah package JSON.

4. Setelah package JSON dibuat, install package-lock JSON dan node modules dengan mengetikan npm install sass --save-dev seperti gambar berikut:

5. Buat file index.html dan style.scss lalu arahkan link href ke file style.scss

6. Kemudian buat dependencies di package JSON dengan mengetikan npm install parcel-bundler --save-dev. Dependencies berguna untuk menyimpan package manager dengan membawa format masing-masing bahasa ke dalam file berformat JSON.

7. Lalu uji file style.scss dengan mengetikan sass --watch assets/css:dist/css dan otomatis akan membuat folder baru dengan nama dist yang berisi kode CSS sebagai generate hasil style.scss

Ketik kode seperti gambar berikut kemudian cek hasil generate di folder dist/style.css.

Hasil generate dari file SCSS:

File CSS inilah yang nanti digunakan saat project pembuatan website sudah selesai. Jika menggunakan kode dari SCSS, browser tidak akan mengenali kode tersebut. Sebab, harus dengan library atau package manager untuk bisa menjalankan kode dari SCSS ini.

8. Kemudian masuk ke dalam file package JSON hapus "test": "echo ...".

Ubah menjadi:

Tujuannya agar secara otomatis membuat file index.html terhubung dengan file scss.

9. Kemudian, jalankan file dengan mengetikan npm run dev yang bertujuan untuk melihat hasil dari design yang sudah dibuat dengan style.scss. Lalu copy localhost yang dihasilkan dari npm run dev ke browser yang kalian gunakan.

10. Dan inilah hasil output dari kode style.scss, tentunya ini sudah otomatis refresh di browser, jika kalian mengubah kode yang ada di style.scss akan secara otomatis juga mengenerate kode ke dalam file style.css .

Sampai di sini pembahasan tentang penginstallan SASS yang otomatis refresh di browser. Tentunya, dengan mengikuti tutorial ini, kamu akan mendapatkan file SCSS yang mempunyai kekuatan dari SASS.

Selamat Mencoba :)

Artikel ini merupakan kontribusi dari peserta program Gamelab Indonesia. Isi dari artikel ini tidak mewakili pandangan tim Gamelab Indonesia.


Rizqi Reza Ardiansyah

Rizqi Reza Ardiansyah

Senin, 26 September 2022

ARTIKEL TERKAIT

Magang lebih mudah dan bisa dilakukan dari mana saja dengan Program Magang Online Gamelab. Magang Bersertifikat, plus Pelatihan!

DAFTAR MAGANG

ARTIKEL POPULER

KATEGORI