CSS : Kenalan Dan Install Sass Di Windows (Lengkap)

Posted by

Sudah kenal belum sama Sassy? Sebuah CSS preprocessor yang menjadi primadona banyak developer ini memang sangat membantu kita CSS management. Install Sass di windows dan kita ajak kenalan yuk!!

Kalau kalian sering bermain dengan css, themes development, tweaking themes, dan lain sebagainya, mungkin kalian pernah bertemu dengan output dari mbak Sassy, yaitu file berekstensi .sass atau .scss.

Kalau kalian baru mulai dan belum pernah bertemu sama mbak Sassy, jangan berkecil hati karena kita akan sama – sama bersilaturahmi dan mengundang mbak Sassy datang ke rumah kita.

Syntactically Awesome StyleSheets a.k.a Sass

Sass merupakan sebuah css preprocessor, dengan bahasa sederhana mungkin bisa dibilang kalau Sass ini adalah bahasa pemrograman untuk menghasilkan css.

Awalnya Sass merupakan bagian dari Haml, HTML abstraction markup language, yang menggunakan Ruby sebagai platformnya.

Oleh sebab itu, file Sass banyak mengadopsi style dan syntax bahasa pemrograman Ruby.

Perbedaan .sass Dan .scss

Ibarat pepatah serupa tapi tak sama, itulah realita yang ada pada .sass dan .scss  karena keduanya sama – sama merupakan css preprocessor bahkan dari developer yang sama!

Ekstensi .scss merupakan penerus dari .sass yang masih di maintain oleh developer Sass.

Perubahan tersebut di lakukan supaya Sass bisa tetap selaras dengan css dan memiliki syntax yang lebih Css-friendly.

Selain itu di harapkan agar pengguna CSS mudah melakukan shifting antara CSS dan Sass.

Walaupun .scss sudah lama dikembangkan menggantikan .sass, terkadang saya masih banyak menemukan file – file .sass yang masih berkeliaran.

Dunno why, dugaan saya mungkin karena .sass lebih Ruby-familiar yang masih memiliki fans tersendiri.

Ibarat kata, saat ini pun saya juga masih menemukan orang yang menggunakan windows XP.

Sebenarnya perbedaan mendasar antara .sass dan .scss terletak pada syntax yang di gunakan.

Teman -teman bisa melihat perbedaannya pada contoh sederhana berikut.


####### SASS #######
$font-stack: Helvetica, sans-serif 
$primary-color: #333 

body
 font: 100% $font-stack
 color: $primary-color 

####### SCSS ####### 
$font-stack: Helvetica, sans-serif; 
$primary-color: #333; 

body {
  font: 100% $font-stack;
  color: $primary-color;
} 

####### CSS ####### 
body {
  font: 100% Helvetica, sans-serif;
  color: #333; 
}
 

Kita bisa lihat kalau .sass menggunakan identation ( Spasi / Tab ).

Sedangkan .scss menggunakan kurung kurawal ( {} ) dan titik koma ( ; ) .

Mana yang lebih familiar menurut anda?

Yup, pengguna CSS akan lebih familiar dengan sytax .scss di bandingkan dengan .sass.

Keuntungan Menggunakan Sass

Kenapa harus repot – repot memakai Sass?

Emangnya CSS masih ada yang kurang?

Sabar sob, seperti yang sudah saya jelaskan secara singkat di atas, Sass itu cuma preprocessor CSS, jadi hasil akhirnya memang CSS.

Untuk membuat tampilan sederhana atau tampilan yang tidak memerlukan maintenance, langsung membuat CSS tidak masalah.

Bagi teman – teman yang sudah sering mengerjakan project atau minimal kalian sudah pernah membuat themes blog seperti wordpress misalnya, maka kalian pasti paham bagaimana ribetnya memaintenance CSS yang bisa sampai ribuan baris.

Disinilah salah satu keuntungan paling besar yang saya rasakan saat menggunakan Sass dibandingkan CSS.

Setidaknya sudah tidak terlalu pegal tangan ini melakukan scroll bolak balik untuk merubah sesuatu.

Sebagai contoh sederhana, anggap kita sudah bosan sama warna merah di berbagai elemen blog dan ingin mengganti ke warna hijau biar kelihatan lebih teduh.

Kalau di CSS, kita harus scroll bolak balik untuk merubah semua warna di tiap elemen.

Kalau menggunakan Sass, kita cuma tinggal merubah nilai variabelnya saja.

Misalkan warna merah kita definisikan di variabel $color-ijo: red; kita tinggal ubah menjadi $color-ijo: green;. Simple tidak?

Masih banyak lagi keuntungan menggunakan Sass, terutama kalau kita bekerja secara team.

Kode jadi lebih mudah di baca, lebih rapi, dan untuk skala besar penulisan kode bisa lebih singkat.

Satu poin lagi yang sangat penting bagi saya, dengan sass kita bisa menggunakan file secara partial!!

Intinya file di bagi menjadi beberapa part kecil sehingga kita mudah mengelompokkannya.

Dan hal tersebut cukup membantu saya menghindari syntax @import CSS yang tidak ramah performance.

Install Sass Di Windows

Awal mula saya menginstall Sass di windows menggunakan CLI, Command Line Interface, dari windows yaitu cmd / command prompt.

Berbekal surfing web – web lokal maupun interlokal, hampir semuanya mengulas tentang instalasi Sass di windows menggunakan Ruby-Sass. Dan hal tersebut seolah menjadi suatu absolut truth sebagai satu – satunya cara instalasi Sass di windows.

Padahal dari website Sass sendiri menyatakan kalau ternyata ada beberapa alternatif instalasi Sass di windows yang bisa di gunakan.

Kenapa bukan official website Sass yang pertama kali saya kunjungi?

Karena berdasarkan pengalaman, guide dari official website biasanya susah di mengerti.

Belakangan saya baru sadari, cara terbaik adalah mengunjungi official website pertama kali sebagai acuan lalu mencari artikel maupun tutorial yang lebih newb-friendly sebagai pelengkap.

Sampai saat saya menulis artikel ini pun, cara untuk menginstall Sass di windows yang beredar kebanyakan masih menggunakan Ruby-Sass.

Padahal pihak Sass sudah mengumumkan kalau mereka akan berhenti mendevelop Ruby-Sass.

Jadi untuk teman – teman yang baru akan menginstall Sass, bisa mulai dengan beberapa opsi di bawah.

Dan kalau kalian sudah menginstall dan menggunakan Ruby-Sass, mungkin sudah saatnya mulai beralih ke lapak lain, Dart-Sass misalnya.

Untuk menginstall dan menggunakan Sass di windows bisa dilakukan dengan dua cara secara umum.

  • Sass CLI  →  Install Sass menggunakan command line.
  • Sass GUI  →  Install Sass menggunakan aplikasi.

Pilih salah satu yah yang menurut kalian paling familiar, karena pilihan instalasi Sass akan menentukan metoda penggunaannya juga.

Sass CLI

Untuk menginstall Sass di windows menggunakan CLI kita bisa memakai cmd atau powershell sebagai tools utama.

Ada dua cara yang bisa di gunakan untuk menginstall Sass melalui command line di windows, yaitu :

  • Install Sass sebagai standalone program
  • Install Sass melalui package manager
  1. Install Sass Sebagai Standalone Program (Dart-Sass)

Menginstal Sass di windows dengan metode ini memberikan banyak keuntungan, karena kita hanya menginstall program Sass saja, tanpa dependency.

Sehingga Sass akan bersifat lighweight, ringan dan cepat tanpa memberi load berlebih ke komputer kita.

Mungkin hal tersebut tidak terlalu terasa untuk CSS yang simple, mengingat kemampuan hardware komputer / laptop yang semakin hari semakin canggih.

Namun beda kasus jika kita mengerjakan CSS yang kompleks, multiple file, atau CSS big project, maka proses compiling Sass yang di install dengan metode ini akan terasa lebih ringan.

Sebelum memulai instalasi, kita perlu mendefinisikan path installer terlebih dahulu.

Buat folder instalasi Sass di lokasi yang kita inginkan. Di sini saya membuat folder instalasi dengan nama folder Sass di C: sehingga alamat instalasi saya ada di C:Sass.

Setelah folder kita buat, selanjutnya klik kanan di Computer dan pilih Properties.

install-sass-windows

Maka akan terbuka System Information, selanjutnya klik Advance system settings.

install-sass-windows

Lalu klik Environment Variables

install-sass-windows

Pada panel System variables cari variable Path lalu klik edit.

install-sass-windows

Selanjutnya akan muncul window Edit System Variable. Kita akan akan fokus sama kolom input Variable Value.

Kalau  di bagian ini kosong, kalian bisa langsung memasukkan alamat folder instalasi Sass plus titik koma ( ex. C:Sass; ).

Tapi kalau sudah terisi, maka alamat folder di input di bagian awal dari value tersebut.

Sebagai contoh, di tempat saya sudah terisi value :

 
%C_EM64T_REDIST11%binIntel64;%SystemRoot%system32;%SystemRoot%;%SystemRoot%System32Wbem;%SYSTEMROOT%System32WindowsPowerShellv1.0
 

Maka saya akan menambahkan alamat folder instalasi Sass, C:Sass,  plus titik koma di awal baris sehingga value tersebut menjadi :


C:Sass;%C_EM64T_REDIST11%binIntel64;%SystemRoot%system32;%SystemRoot%;%SystemRoot%System32Wbem;%SYSTEMROOT%System32WindowsPowerShellv1.0
 

Setelah itu klik OK.

install-sass-windows

Selanjutnya klik OK di semua window yang terbuka.

Setelah PATH kita definisikan, selanjutnya kita akan mendownload Dart-Sass sebagai program Sass.

Berdasarkan official website Sass, program tersebut mereka hosting di github. Maka kita kunjungi github tersebut terlebih dahulu.

install-sass-windows

Pilih sesuai dengan system windows kalian. Karena arsitektur system windows saya 64-bit, maka saya akan mendownload dart-sass-{version}-windows-x64.zip.

Kalau punya sobat 32-bit, maka pilih yang dart-sass-{version}-windows-ia32.zip.

Setelah itu ekstrak file zip tersebut di folder Sass kita, C:Sass. 

Kalau hasil dari ekstraksi berupa folder dart-sass, maka semua file dalam folder dart-sass harus di copy ke top level folder Sass kita, dalam hal ini C:Sass.

install-sass-windows

Sekarang kita test apakah instalasi Sass sukses atau tidak.

Buka Command Prompt atau CMD dan ketikkan sass --version atau sass --help

install-sass-windows
Sass Command : sass --version
install-sass-windows
Sass Command : sass --help

  1. Install Sass Melalui Package Manager

Package manager? di windows? Seriously?

Bagi kalian yang sudah atau pernah menggunakan linux pasti paham apa itu package manager dan sebagus apa package manager itu.

Sebagai contoh, di linux environment pakage manager berupa apt untuk ubuntu, yum untuk redhat, pacman untuk arch, dan lain sebagainya.

Untuk menginstall software di windows biasanya kita menggunakan cara konvensional yaitu download softwarenya terlebih dahulu, buka folder atau langsung klik hasil download terus ikuti proseduralnya dengan klik next > next > next > finish.

Terbilang simple sih sebelum kita mendapatkan pesan error, ada yang kurang, bahkan kadang kita sudah freeing up some space dan setia menunggu proses instalasi selesai ujung – ujungnya waktu program dibuka malah error!

Berbeda dengan linux, kita cukup mengetikkan apt-get install [software] dan software overall akan terinstall tanpa kita harus memikirkan dependency ( software tambahan yang di perlukan), settings, dan lain sebagainya.

Untuk update, mayoritas software windows biasanya sudah ada auto updatenya, atau minimal update notifier.

Di windows, untuk mengecek update kita harus cek software satu per satu atau browsing apakah software kita up to date.

Sedangkan di linux kita cuma perlu mengetikkan apt-get update maka software akan terupdate otomatis.

Sedangkan jika akan melakukan upgrade, apt-get upgrade && apt-get dist-upgrade maka semua software maupun program yang outdated juga akan otomatis terupgrade! Nice Isn’t it??

Masih banyak benefit lain dari sebuah package manager.

Tapi ada satu kekurangan package manager, yaitu laptop / komputer kita harus memiliki koneksi internet!!

Bisa saja sih kalau kita mau menggunakan secara offline, tapi hal tersebut mengurangi benefit dari sebuah package manager.

Kabar baiknya di windows juga ada package manager loh. Bukan official seperti di linux, tapi cukup membantu kita menginstall software atau kalau kita ingin mempunyai windows rasa linux.

Chocolatey, merupakan software package manager open source yang bisa kita pakai di windows. Memang belum banyak package yang ada di repo mereka, setidaknya general package seperti browser, office, pdf, dan lain sebagainya sudah ada.

Saat saya menulis artikel ini, chocolatey mengklaim baru 5848 package yang mereka maintained.

Kalau kalian tertarik atau bahkan sudah menggunakan chocolatey, maka untuk menginstall Sass di windows kita bisa menggunakan bantuan chocolatey.

Masa Sass ada di chocolatey?

Yup, Sass ada di chocolatey, awesome!!

Untuk menginstal chocolatey kita akan menggunakan cmd ( command prompt ) sebagai administrator, bukan user.

Caranya sudah tau kan? klik kanan di cmd dan pilih Run as administrator.

install-sass-windows

Setelah cmd terbuka, copy code berikut ini dan paste di cmd.

@"%SystemRoot%System32WindowsPowerShellv1.0powershell.exe" -NoProfile -InputFormat None -ExecutionPolicy Bypass -Command "iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))" && SET "PATH=%PATH%;%ALLUSERSPROFILE%chocolateybin"
install-sass-windows

Tekan enter dan tunggu hingga proses instalasi selesai. Setelah selesai, kita coba dengan mengetikkan choco -? dan di cmd akan di tampilkan berbagai list command yang bisa di gunakan.

install-sass-windows

Sekarang kita check apakah Sass ada di chocolatey. Ketik choco search sass dan hasil yang muncul bisa di lihat pada gambar berikut.

install-sass-windows

Dan ternyata Sass sudah ada di chocolatey. Sekarang saatnya kita install Sass.

Ketik choco install sass dan chocolatey akan memulai instalasi Sass.

install-sass-windows

Saat menginstall, akan muncul konfirmasi dependency install. Kita cukup jawab Y sebagai konfirmasi.

install-sass-windows
install-sass-windows

Dan akhirnya Sass telah terinstall di windows kita.

Sekarang kita coba apakah Sass bisa running. Kita coba ketikkan di cmd sass --version atau sass --help dan hasilnya bisa di lihat seperti berikut.

install-sass-windows

Dari gambar di atas bisa di lihat hasil sass --version menunjukkan kalau versi Sass masih versi 1.3.1 sedangkan versi terbaru Sass saat artikel ini di tulis sudah versi 1.9.1.

Kok bisa? karena chocolatey bersifat open source, maka setiap package yang masuk akan di review terlebih dahulu oleh chocolatey.

Walaupun efeknya versi updated menjadi telat, tapi kita bisa memastikan kalau tiap package yang kita install melalui chocolatey aman dari yang namanya virus, malware, compatibility, dan lain sebagainya.

Sass GUI

Tidak suka dengan si blacky a.k.a command line?

Maka instalasi dengan metode grafis ada untuk siap menemani kalian untuk ber-CSS ria, tentunya dengan aplikasi tambahan supaya Sass bisa di install dan di jalankan secara grafis.

Beberapa aplikasi yang bisa di gunakan untuk menginstall dan menjalankan Sass di antaranya sebagai berikut.

Aplication Price Platform
Codekit $34 MacOS
Ghostlab $49 Win 7+     MacOS 10.9+
Hammer $19.99 MacOS
Koala free | open source Windows     MacOS     Linux
LiveReload $10 | open source Windows     MacOS     Linux
Prepros $29 Windows     MacOS     Linux
Scout-App free | open source Windows     MacOS     Linux

Mungkin ada teman – teman yang bertanya, ada yang gratis gitu apa yang berbayar ada yang mau beli?

Tentu ada sobat, karena fitur serta dukungan yang diberikan oleh aplikasi berbayar lebih daripada yang gratis.

Dari berbagai pilihan aplikasi di atas tentu saja saya akan menggunakan yang gratis dan aplikasi yang saya pilih adalah Koala. 

Kenapa pilih Koala om? Kenapa bukan Scout-app? Kan sama -sama gratis.

Alasannya lebih ke preferensi pribadi saya sih, yaitu karena di homepage Koala ada koala nyasar yang lagi nangkring, dan itu lucu!! LOL

install-sass-windows

Alasan lain yang jadi pertimbangan saya yaitu Koala lebih well documented di banding Scout-app.

Hal tersebut membuat Koala lebih noob-friendly. But seriously, alasan utama saya karena koala nangkring itu! LOL again and again..

Waktunya serius lagi, so karena kita sudah sepakat menggunakan koala, jadi kita akan menggunakan koala untuk menarik perhatian mbak Sassy.

Kunjungi web koala dan klik download untuk mulai mendownload Koala.

install-sass-windows

Setelah selesai, buka file KoalaSetup.exe dan jalankan installernya.

Pada window yang muncul klik Next untuk melanjutkan.

install-sass-windows

Pada window selanjutnya, silahkan pilih lokasi dimana kalian ingin menginstall Koala.

Secara default, koala akan menginstall di C:Program files dan selanjutnya kita klik Next.

install-sass-windows

Pada window selanjutkan kita di minta menentukan shortcut Koala di start menu.

Kita biarkan saja sesuai defaultnya lalu klik Install.

install-sass-windows
install-sass-windows

Tunggu hingga instalasi Koala selesai.

Kalau sudah selesai, klik Finish dan kita mulai membuka Koala.

install-sass-windows

Yippyy, Koala sudah sukses kita install.

Let’s say Hi to Koala..

install-sass-windows

Saatnya kita tes apakah si Koala ini mampu untuk mendatangkan mbak Sassy ke tempat kita.

Pertama kita buat file scss terlebih dahulu.

Di sini saya akan membuat file scss dengan nama file omgoblog.scss menggunakan notepad++ dengan kode scss sederhana seperti berikut.


$font-stack: Helvetica, sans-serif; 
$primary-color: #333; 

body {
  font: 100% $font-stack;
  color: $primary-color;
}
 
install-sass-windows

Dari gambar di atas perlu di perhatikan kalau kita harus pastikan type file adalah SCSS File.

Setelah itu kita buka Koala dan klik tombol plus ( ) lalu cari folder tempat file scss kita lalu klik OK. Atau bisa juga dengan drag & drop file scss.

install-sass-windows

Koala akan mendeteksi file scss dalam folder tersebut.

Setelah kita mendefinisikan lokasi file scss kita, selanjutnya kita perlu mendefinisikan lokasi hasil compiling Koala, yaitu file css.

Caranya dengan klik kanan di scss koala, lalu klik Set Output Path.

install-sass-windows

Dari gambar di atas, kita bisa lihat Koala sudah mengcompile file css secara automatis sesuai dengan nama file scss kita, dan satu folder dengan file scss kita.

Jika kita ingin mengatur lokasi dan nama file secara manual, maka kita perlu untuk mengatur Set Output Path ini.

Pada gambar berikut, kalian bisa lihat untuk menentukan nama file atau lokasi cukup mudah, layaknya Save As dokumen.

install-sass-windows

Setelah kita klik Save, selanjutnya kita coba compiling file omgoblog.scss dengan cara klik file scss di Koala, lalu klik Compile.

install-sass-windows

Setelah itu kita coba cek apakah file css sudah di generate atau belum.

Kita cek folder yang sudah kita definisikan di Set Output Path.

install-sass-windows

Proses compiling sukses, file omgoblog-styles.css sudah di generate oleh Koala.

Sekarang kita buka file css tersebut dan kita bandingkan dengan file scss kita.

install-sass-windows

Dari gambar di atas, file scss kita sudah di generate dengan bantuan Koala.

Selanjutnya setiap perubahan yang kita lakukan di file scss, maka Koala akan meng-compile secara otomatis, selama aplikasi Koala running di system.

So jangan lupa pastikan Koala running sebelum kalian bekerja dengan file scss kalian yah.

Leave a Reply

Your email address will not be published. Required fields are marked *