Panduan Lengkap Menginstall SASS di Windows
Admin
Penulis Artikel
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 --versionJika instalasi berhasil, Anda akan melihat versi Node.js yang terpasang. Selanjutnya, lakukan hal yang sama untuk npm (Node Package Manager) dengan perintah:
npm --versionLangkah 3: Menginstall SASS
Dengan Node.js terpasang, sekarang kita bisa menginstall SASS. Di terminal atau command prompt, ketik perintah berikut:
npm install -g sassPerintah 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 --versionJika 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 CurrentUserIni 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.cssPastikan 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 CurrentUserJika muncul konfirmasi, ketik Y lalu Enter.
Tutup PowerShell dan buka kembali terminal di VS Code atau terminal biasa. Sekarang perintah
sassseharusnya 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!
Artikel Terkait
Best Practices Pengembangan Proyek Python dengan .env dan Dotenv
Pelajari cara mengelola konfigurasi proyek Python Anda dengan .env dan dotenv untuk pengembangan yang lebih efisien.
Tips dan Trik Menggunakan SASS untuk Desain Web yang Lebih Baik
Temukan tips dan trik penggunaan SASS untuk meningkatkan efisiensi desain web Anda dengan mudah.
Panduan Membuat Animasi Animated on Scroll di Website Anda
Pelajari cara membuat animasi menarik pada scroll di website Anda dengan tutorial ini. Tampilkan konten dengan cara yang lebih interaktif!