Pengenalan SASS

SASS (Syntactically Awesome Style Sheets) adalah preprocessor CSS yang memungkinkan kita untuk menulis CSS dengan lebih efisien dan terstruktur. Dengan SASS, kita bisa menggunakan variabel, nested rules, dan mixins yang membuat pengembangan web menjadi lebih mudah dan terorganisir. Pada artikel ini, kita akan membahas langkah-langkah untuk menginstall SASS mulai dari mengunduh Node.js hingga menjalankan SASS di terminal.

Langkah 1: Mengunduh dan Menginstall Node.js

Node.js adalah runtime JavaScript yang diperlukan untuk menjalankan SASS. Ikuti langkah-langkah berikut untuk menginstall Node.js:

Kunjungi situs resmi Node.js: Buka nodejs.org.
Pilih versi: Anda akan melihat dua versi yang tersedia: LTS (Long Term Support) dan Current. Untuk kebanyakan pengguna, kami sarankan untuk mengunduh versi LTS.
Unduh installer: Klik pada tombol unduh yang sesuai dengan sistem operasi Anda (Windows atau Mac).
Jalankan installer: Setelah unduhan selesai, buka file installer dan ikuti instruksi di layar untuk menyelesaikan instalasi.

Langkah 2: Memverifikasi Instalasi Node.js

Setelah instalasi selesai, kita perlu memastikan bahwa Node.js telah terpasang dengan benar. Buka terminal atau command prompt dan ketik perintah berikut:

node --version

Jika instalasi berhasil, Anda akan melihat versi Node.js yang terpasang. Selanjutnya, lakukan hal yang sama untuk npm (Node Package Manager) dengan perintah:

npm --version

Langkah 3: Menginstall SASS

Dengan Node.js terpasang, sekarang kita bisa menginstall SASS. Di terminal atau command prompt, ketik perintah berikut:

npm install -g sass

Perintah ini akan menginstall SASS secara global di sistem Anda, sehingga dapat diakses dari mana saja.

Langkah 4: Menjalankan SASS

Setelah SASS terinstall, Anda dapat mulai menggunakannya. Untuk memastikan bahwa SASS telah terinstal dengan benar, jalankan perintah berikut:

sass --version

Jika Anda melihat versi SASS yang terpasang, berarti instalasi berhasil.

Langkah 5: Mengatur Eksekusi Policy (khusus Windows)

Jika Anda menggunakan Windows PowerShell dan terjadi error, Anda mungkin perlu mengatur Execution Policy agar dapat menjalankan skrip. Ketik perintah berikut di PowerShell:

Set-ExecutionPolicy RemoteSigned -Scope CurrentUser

Ini memungkinkan Anda untuk menjalankan skrip yang ditandatangani dari internet dan skrip lokal yang tidak ditandatangani. Pastikan untuk menjalankan PowerShell sebagai Administrator.

Langkah 6: Membuat Proyek SASS Pertama Anda

Setelah semua langkah di atas selesai, Anda sudah siap untuk mulai menggunakan SASS. Buat folder baru untuk proyek Anda dan di dalam folder tersebut, buat file SASS dengan ekstensi .scss, misalnya style.scss.

Isi file tersebut dengan kode SASS yang Anda inginkan, misalnya:

$warna : rgb(28, 212, 21);
body{
    height: 100vh;
    background-color: $warna;
}

Untuk mengkompilasi file SASS menjadi CSS, jalankan perintah berikut di terminal:

sass --watch style.scss style.css

Pastikan terminal dibuka pada folder yang sama dengan file .scss. Anda dapat membuka terminal langsung dari VS Code pada folder proyek tersebut seperti gambar dibawah

Jika perintah berhasil dijalankan, maka akan otomatis dibuat file style.css pada proyek kita seperti pada gambar di bawah.

Agar file CSS hasil kompilasi SASS dapat digunakan, buatlah file index.html di folder yang sama dengan file style.scss Anda.

HTML

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Latihan SASS Pertama</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Halo, SASS!</h1>
    <p>Ini adalah contoh teks yang warnanya diatur menggunakan variabel SASS.</p>
</body>
</html>

Setelah itu, jalankan atau buka file index.html di browser. Jika proses kompilasi SASS ke CSS sebelumnya berhasil, maka style dari file style.css hasil kompilasi style.scss sudah diterapkan pada halaman tersebut seperti contoh berikut

Mengatasi Error: "Script cannot be loaded" (Set-ExecutionPolicy)

Seringkali, pengguna Windows mengalami error saat pertama kali menjalankan perintah sass --watch. Error biasanya berbunyi seperti ini:

"...sass.ps1 cannot be loaded because running scripts is disabled on this system."

Mengapa Ini Terjadi?

Secara default, Windows PowerShell membatasi eksekusi skrip demi keamanan untuk mencegah skrip berbahaya berjalan tanpa izin. Karena SASS dijalankan sebagai skrip .ps1 di PowerShell, Anda harus memberikan izin akses.

Solusi Langkah-Demi-Langkah:

Klik Start, cari PowerShell/Terminal.
Klik kanan dan pilih Run as Administrator.

Ketik perintah berikut dan tekan Enter:

PowerShell

Set-ExecutionPolicy RemoteSigned -Scope CurrentUser

Jika muncul konfirmasi, ketik Y lalu Enter.
Tutup PowerShell dan buka kembali terminal di VS Code atau terminal biasa. Sekarang perintah sass seharusnya berjalan lancar.

Kesimpulan

Anda sekarang telah berhasil menginstall SASS dan siap untuk menggunakannya dalam proyek web Anda. Dengan SASS, Anda dapat meningkatkan efisiensi penulisan CSS dan membuat kode lebih terstruktur. Jangan ragu untuk bereksperimen dengan fitur-fitur SASS lainnya seperti mixins, nesting, dan inheritance. Selamat berkarya!

#SASS

Panduan Lengkap Menginstall SASS di Windows