Yuwan Ariestiyan
Life is Good

Its not like coding using CSS is boring, hanya saja terkadang iterasi yang begitu begitu saja membuat kita jenuh, so meskipun terbilang telat tapi gapapa lah daripada enggak mudah mudahan bisa berguna so I post some ‘lil stuff I knew about Sass

What is Sass?

Sass (Syntactically Awesome Stylesheets) adalah sebuah pengembangan dari CSS3 dengan menambahkan nested rules, variables, mixins, selector inheritance, dan banyak lagi. dia menerjemahkan css dengan struktur yang lebih baik.

Sass makes CSS fun again. Sass is CSS, plus nested rules, variables, mixins, and more, all in a concise, readable syntax. – Hampton Catlin

more detail about what Sass can do bisa dicek disini http://sass-lang.com/guide

Apa kelebihan Sass?

CSS yang dihasilkan akan rapi dan mudah di mengerti. Otomatis akan berjalan dengan baik di setiap browser. Hasil output CSS akan lebih terstruktur.

Tetapi untuk bisa menggunakan Sass tidak semudah CSS, ada beberap hal yang perlu di “install” terlebih dahulu, berikut adalah sedikti tutorial cara install Sass di Windows dan Mac

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

  1. Download Ruby Installer (versi terbaru 1.9.3-p327)
  2. Install Ruby yang sudah di download
  3. Setelah Ruby terinstall, masuk ke Command Prompt Ruby ( Start -> All Program -> Ruby 1.9.3-p327 -> Start Command Prompt With Ruby )
  4. Install Sass dengan perintah : gem 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: sass)
  2. Buat File html atau PHP dan panggil css di tag head <link rel=”stylesheet” href=”style.css” />
  3. Buat file sass dengan nama style.scss * Ingat ekstensi nya .SCSS
    contoh isinya sebagai berikut :$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.
  4. Buka kembali Command Prompt, masuk ke folder sass
  5. Compile file .SCSS agar menjadi file .CSS dengan perintah berikut  : sass –watch folder/foldersass:folder/foldercss
  6. File CSS akan terbentuk dengan nama style.css, coba jalankan http://localhost/sass untuk lihat hasilnya.

Macintosh

Jika kalian ingin install Sass di Macintosh bisa dibilang jauh lebih mudah step nya dibanding kan install Sass di windows, karena Ruby sudah ter-install disana, yang harus kalian lakukan berikut nya adalah :

  1. Buka Terminal atau Command Prompt
  2. lalu untuk step selanjut nya bisa ikuti step yang sama dengan cara install di Windows diatas :p

 

Leave a Reply

Your email address will not be published.