Siswa Magang Ilham Pujo : Belajar SASS / SCSS

Kali ini saya akan membahas tentang SASS/SCSS ,Apa itu scss ? nah scss sendiri itu sebenarnya sama dengan CSS biasa tetapi kalian bisa membuat variabel atau kondisi kondisi if else dan sebagainya untuk mempermudah dalam penulisan css.

Nah hal utama yang harus dilakukan untuk memulai menggunakan SASS/SCSS adalah yang pasti instalasi dulu yaitu dengan menginstall Ruby, karena SASS berjalan diatas Ruby.
Untuk penggunaan di windows kita bisa menggunakan Ruby Installer untuk windows.

  • Anda bisa Mendownload Ruby Installer (versi terbaru 1.9.3-p327) secara gratis di google
  • Install Ruby yang sudah di download -> Install Ruby Sampai selesai
  • Setelah Ruby terinstall, masuk ke Command Prompt Ruby ( Start -> All Program -> Ruby 1.9.3-p327 -> Start Command Prompt With Ruby ) Command Prompt Ruby berbeda dengan CMD biasa loh jadi jangan salah buka ->Open Command Prompt Ruby
  • Install Sass dengan perintah “gem install sass” tanpa tanda petik
  • Tunggu Proses Installasi selesai – > sekarang anda sudah bisa memulai Bekerja Dengan Sass
  • Buat sebuah folder di htdocs (contoh buat folder dengan nama “coba”)
  • Buat File HTML (index.html) dengan struktur berikut di <body> dan </body>

sedangkan bagian head dan </head> nya jangan lupa sertakan file css hasil kompilasi dari sass seperti biasa taruh kode awal saat memasukkan css ke html diatara head
<link rel=”stylesheet” href=”style.css” />

  • Buat file sass dengan nama style.scss isinya sebagai berikut
    * Ingat ekstensi nya .SCSS

Disitu kita bisa lihat, css sekarang bisa mengunakan variable atau juga bisa dengna if else , pembagian dan pengurangan.

Gimana scss , menarik kan ngerjain css serasa ngoding biasa tinggal manggil nama variabelnya aja.
Untuk penggunaan sintak .SCSS atau .SASS lebih lanjut, silahkan baca di website sass.

  • Buka kembali Command Prompt, masuk ke folder mysass
    Disini folder mysass saya berada di E:\XAMPP\htdocs\coba\
  • Compile file .SCSS agar menjadi file .CSS dengan perintah berikut

sass –watch style.scss:style.css

File CSS akan terbentuk dengan nama style.css, silahkan jalankan http://localhost/coba untuk melihat hasilnya.

Loading Facebook Comments ...