template-featured-image

Bekerja Dengan Sass

BagikanShare on FacebookShare on Google+Tweet about this on TwitterEmail this to someoneShare on LinkedIn

Startup Framework (Image)

Install Sass

Untuk  pembahasan sekarang saya akan melanjutkan dari materi yang kemarin, masih membahas tentang sass.
untuk memulai bekerja menggunakan sass, terlebih dahulu anda harus menginstal Ruby. jika anda menggunakan windows gunakan Ruby Installer . kemudian Install ruby yang telah didownload tersebut.
cara Install seperti biasa tidak ada perbedaan, jika Ruby tidak bisa diInstall coba dengan menginstall Ruby versi sebelumnya(rubyinstaller-2.0.0-p247).
Berikut adalah cara untuk mengintsal sass:

  1. Setelah mengintsal Ruby, buka terminal atau Command  Prompt dimenu Start ->  Command Prompt.
  2. Untuk melihat versi dari ruby yang kita install ketikan pada Command Prompt “Ruby -v”
  3. Selanjutnya Install Sass, ketikan   “gem install sass” tanpa kutip, lihat gambar dibawah:

installsass1

untuk memastikan sass sudah terinstal ketikan “sass -v” untuk melihat versi sass yang sudah terinstal.

Memulai Project Sass

Sekarang sass sudah terinstall, untuk memulai project sass kita buat file html dan file sass dengan extensi .scss untuk style nya,
lihat struktur file dibawah ini:

\--Sass
	|\--assets
    |   \--main.scss
	|
	|\--Index.html

setelah membuat file dengan struktur seperti diatas, pastikan pada index.html load style css seperti biasa didalam tag

<Head>
" <link rel="stylesheet" href="assets/main.css" type="sass/css">"

pertanyaannya sekarang kenapa yang di load adalah file yang berextensi .css? ketika kita bekrja dengan sass, sass akan mengkompiler file yang kita buat, dengan kata lain file scss / sass akan di rubah kedalam code css biasa dan itu secara otomatis akan dibuat oleh sass, maka yang dipanggil pada html itu adalah file .css.

selanjutnya, simpan file tersebut, kemudian pada Command Prompt masuk ke directory file dimana file yang berextensi.scss/sass itu berada.

Menjalankan sass

Untuk menjalankan Sass kita cukup ketikan pada command prompt

“sass – -watch (file input sass):(file output sass) “

maka akan jadi seperti ini

“sass – -watch main.scss:main.css”

sebagai contoh saya tunjukan pada latihan yang saya buat tadi:

imagesass2

maka sass akan menggenerate file main.css dan main.css.map secara otomatis, dan anda hanya bekerja pada file main.scss untuk styling karena secara otomatis sass akan mengubah code anda menjadi css biasa pada file main.css

imagesass3

Selama anda bekerja command prompt tersebut jangan anda tutup karena sass akan memonitor file atau folder yang berisi file .scss /.sass dan mengkompile nya menjadi file CSS.

Menghentikan Project Sass

Untuk Menghentikan project sass anda tinggal menekan CTRL+ C pada command prompt maka project sass dihentikan.

Kesimpulan

Sass dijalankan dengan menggunakan jalannya Ruby, sass akan mengubah code yang kita buat kedalam css biasa yang akan di outputkan pada file yang berextensi .css

sekian penjelasan singkat dari materi ini anda dapat explore lebih lanjut dengan cara latihan sendiri.
sebagai tambahan untuk snipet struktur file sass anda bisa clone dari github Ihsan Atkia, jika anda membutuhkannya.

Terimakasih.

BagikanShare on FacebookShare on Google+Tweet about this on TwitterEmail this to someoneShare on LinkedIn

Comments

  1. opanbobo says:

    Gan kok ane ga bisa install sass ya? error nya could not find a valid gem
    plz help :(

  2. ihsan atkia says:

    pastiin ruby nya sudah terinstall. kalo blum coba pake ruby nya yang versi old (rubyinstaller-2.0.0-p247) jangn versi terbaru, soalnya ane juga kaya gitu pas install ruby v old ternyata bisa

  3. Raiz says:

    ketikan ini dulu gan :
    gem sources -a http://rubygems.org/

    baru ketik ini :
    gem install sass

    sumber :
    http://stackoverflow.com/questions/27278966/error-sass-installation-for-windows

  4. Firmansyah says:

    Makasih om tutorial nya ngebantu banget (y) sukses selalu

  5. heri says:

    C:\Windows\system32>gem install sass
    ERROR: Could not find a valid gem ‘sass’ (>= 0), here is why:
    Unable to download data from https://rubygems.org/ – SSL_connect returned=1 errno=0 state=SSLv3 read server certificate B: certificate verify failed (https://api.rubygems.org/specs.4.8.gz)

    udh coba instal 3 ruby versi beda semua tapi tetp aja kyk gn hasilnya? bisa dibantu kah? tolong dong,,

    • Ihsan atkia says:

      Maaf gan baru baca comment nya :), gmna masih error gak ? install ruby nya? sudah coba versi rubyinstaller-2.0.0-p247?