Sass - Instalasi

Pada bab ini, kita akan mempelajari prosedur langkah demi langkah untuk menginstal Ruby, yang digunakan untuk menjalankan file SASS.

Persyaratan Sistem untuk SASS

Operating System - Lintas platform
Browser Support - IE (Internet Explorer 8+), Firefox, Google Chrome, Safari, Opera
Programming Language - Ruby

Instalasi Ruby

Step 1 - Buka tautannya https://www.ruby-lang.org/en/downloads/, Anda akan melihat layar seperti di bawah ini -

Unduh versi stabil saat ini dari file zip.

Step 2 - Selanjutnya, jalankan setup untuk menginstal Ruby di Sistem.

Step 3- Selanjutnya, tambahkan folder Ruby bin ke Variabel Pengguna PATH dan Variabel Sistem untuk bekerja dengan perintah gem.

Path User Variable -

Klik kanan file My Computer ikon.
Pilih Properties.
Selanjutnya, klik Advanced tab dan klik Environment Variables.

Di jendela Variabel Lingkungan , klik dua kali PATH seperti yang ditunjukkan pada gambar di bawah -

Anda akan mendapatkan kotak Edit Variabel Pengguna seperti yang ditunjukkan. Tambahkan jalur folder ruby bin di bidang nilai Variabel sebagaiC:\Ruby\bin. Jika path sudah diset untuk file lain, maka beri tanda titik koma setelah itu dan tambahkan path folder Ruby seperti yang ditunjukkan di bawah ini.

Klik OK tombol.

System Variable -

Klik New tombol.

Selanjutnya, New System Variable blok ditampilkan seperti yang ditunjukkan di bawah ini.

Memasukkan RubyOptdi bidang Nama variabel danrubygemsdi bidang nilai variabel . Setelah menuliskan nama dan nilai Variabel , klikOK tombol.

Step 4 - Buka command prompt di sistem Anda dan masukkan baris berikut -

gem install sass

Step 5 - Selanjutnya, Anda akan melihat layar berikut setelah menginstal SASS dengan sukses.

Contoh

Berikut ini adalah contoh sederhana SASS.

<html>
   <head>
      <title> Import example of sass</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css"/>
   </head>

   <body>
      <h1>Simple Example</h1>
      <h3>Welcome to TutorialsPoint</h3>
   </body>
</html>

Sekarang, kita akan membuat file sebagai style.scss , yang sangat mirip dengan CSS dan satu-satunya perbedaan adalah file tersebut akan disimpan dengan ekstensi .scss. Kedua, file .htm dan .scss harus dibuat di dalam folderruby. Anda dapat menyimpan file .scss Anda di folder tersebutruby\lib\sass\ (sebelum proses ini, buat folder sebagai sass di direktori lib).

h1{
   color: #AF80ED;
}

h3{
   color: #DE5E85;
}

Anda dapat memberi tahu SASS untuk melihat file dan memperbarui CSS setiap kali file SASS berubah, dengan menggunakan perintah berikut -

sass --watch C:\ruby\lib\sass\style.scss:style.css

Ketika Anda menjalankan perintah di atas, itu akan membuat file style.css secara otomatis. Setiap kali Anda mengubah file SCSS, file style.css akan diperbarui secara otomatis.

File style.css akan memiliki kode berikut ketika Anda menjalankan perintah yang diberikan di atas -

style.css

h1 {
   color: #AF80ED;
}
h3 {
   color: #DE5E85;
}

Mari kita lakukan langkah-langkah berikut untuk melihat bagaimana kode yang diberikan di atas bekerja -

Simpan kode yang diberikan di atas hello.html mengajukan.
Buka file HTML ini di browser.