Selamat Datang

Install Sass di windows

Hai developers, kali ini kita akan mencoba menginstall Ruby di windows dan coba menggunakan Sass.

Jika anda seorang yang selalu berurusan dengan CSS, kami sarankan anda untuk mencoba Sass, karena dengan Sass penulisan kode CSS menjadi lebih menarik dan menyenangkan. Seperti apa yang tertulis diwebsite resmi Sass

Sass makes CSS fun again. Sass is an extension of CSS3, adding nested rules, variables, mixins, selector inheritance, and more. It’s translated to well-formatted, standard CSS using the command line tool or a web-framework plugin.

Hal utama yang harus dilakukan untuk memulai menggunakan SASS adalah dengan menginstall Ruby, karena SASS berjalan diatas Ruby.

Untuk penggunaan di windows kita bisa menggunakan Ruby Installer untuk windows.

1. Download Ruby Installer (versi terbaru 1.9.3-p327)

2. Install Ruby yang sudah di download

Install Ruby Sampai selesai

Install Ruby Sampai selesai

3. Setelah Ruby terinstall, masuk ke Command Prompt Ruby ( Start -> All Program -> Ruby 1.9.3-p327 ->  Start Command Prompt With Ruby )

Open Command Prompt Ruby

Open Command Prompt Ruby

4. Install Sass dengan perintah

gem install sass

Install SASS

Install SASS

5. Proses Installasi selesai

Mulai Bekerja Dengan Sass

Setelah proses Installasi selesai, berarti sekarang kita bisa memulai pembuatan css dengan menggunakan Sass.

1. Buat sebuah folder di htdocs (contoh: mysass)

2. Buat File HTML (index.html) dengan struktur berikut di body dan /body

	<div class="test">
		<h1>Sass</h1>
		<p>Selamat bermain dengan ruby</p>
	</div>

sedangkan bagian head dan /head nya jangan lupa sertakan file css hasil kompilasi dari sass

[html]<link rel="stylesheet" href="style.css" />[/html]

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

$back-color: #333;
$text-color: #f8f8f8;
$box-margin: 30px;
$box-width: 500px;

.test{
	background: $back-color;
	color: $text-color;
	margin: $box-margin auto;
	padding: $box-margin / 2;
	width: $box-width;
}

Disitu kita bisa lihat, css sekarang bisa mengunakan variable, pembagian dan pengurangan.

Menarik bukan?

Untuk penggunaan sintak .SCSS atau .SASS lebih lanjut, silahkan baca di website sass.

4. Buka kembali Command Prompt, masuk ke folder mysass

Disini folder mysass saya berada di E:\XAMPP\htdocs\mysass\

5. 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/mysass untuk melihat hasilnya.

Demo | Download

Sekian





Penulis :

Website yang berisi Tutorial, Tips, Trik, Inspirasi, Opini, Cerita, Studi kasus, dan berbagai hal menarik tentang Web Design, Web Development dan Graphic Design untuk orang-orang kreatif di Indonesia. View all posts by TWD Editorial

Comments

12 thoughts on “Install Sass di windows

  1. farezaa says:

    apa ada istimewanya (dari segi design tentunya) bila kita menggunakan SASS ??

    thx :)

    • Tidak ada, karena pada akhirnya yang dimengerti oleh browser adalah CSS, yang dibaca browser adalah CSS, jadi kita buat kode dengan SASS lalu kita compile menjadi file CSS.

      SASS memudahkan kita dalam menulis CSS, karena dengan SASS kita bisa menggunakan variable, nested, function, operation (tambah, bagi, kali, kurang, dll) yang tidak bisa dilakukan oleh CSS.
      SASS juga memudahkan kita dalam mengelola sintak di sebuah file css, sewaktu-waktu ingin merubah css, tidak pusing nyari line berapa.

      Dari segi tampilan ya sama saja, karena yang dijalankan browser adalah CSS juga.

      Baca disini ya -> http://sass-lang.com/tutorial.html

    • arwasil says:

      dari segi desain tentunya tergantung dari konten css kita sendiri. Pada umumnya sass membantu coding secara signifikan dengan membuat coding lebih terorganisir, lebih kecil & running quickly

  2. yeinnarayana says:

    wah, teknologi baru..
    tp kalo ujung2nya sama aja, mending langsung CSS an ae mas yah :D

    • Tidak terlalu baru sih, sudah cukup lama jg Sass digunakan untuk membantu pembuatan CSS.
      Hasil nya emang CSS juga, karena browser mengertinya CSS, tapi proses membuat CSS dan untuk pengembangan nya jadi lebih mudah.
      Sama saja seperti membuat website dengan Codeigniter, ujung-ujung nya PHP juga, tapi dengan codeigniter kita bisa membuat website berbasis PHP lebih cepat.
      Kira-kira seperti itu :)

  3. ifliandry says:

    Terima kasih tutorialnya bermanfaat ..
    sering denger sass .. mau ikut pake gak ngerti intallnya
    akhirnya bisa install -lewat tutorial ini tentunya- ..

    btw apa bener compass css framework dibuat pake sass juga ?

  4. […] LESS, pada dasarnya LESS itu extensi pada css yang sangat dinamis dilakukan, atau biasa disebut css preprocessor,  LESS juga bisa membuat sebuah variable, mixins, operasi dan fungsi seperti macam halnya ekstensi […]

  5. Heri Lesmana says:

    Maaf mas atau mbak, kan di tutorial di atas kalo kita udah bikin koding css nya misal style.scss setelah selesai kemudian kita compile ke style.css, kalo gitu kan ribet, gimana kalo cuma ada perubahan kecil, kita ubah style.scss kemudian compile lagi ke style.css..
    .
    Apa ada text editor yang bisa di gunakan untuk husus editor scss dan bisa otomatis compile ke css?.
    .
    Terimakasih sebelumnya

    • Kalau mau mudah bisa pake codekit (di MAC) atau Prepros (di Windows). Tinggal atur nanti otomatis di compile.
      Atau kalau mau manual bisa pelajari Grunt untuk otomatisasi pekerjaan.

Leave a Comment

XHTML: You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>


Klik Tombol Like / Suka ya kawan..

Klik tombol "Like" atau "Suka" untuk mendapatkan update tutorial, tips & tricks serta info terbaru seputar dunia web design & development