Mengenal SASS

Assalamu’alaikum guys. Hai, perkenalkan nama saya Hilma Faizah. Kali ini saya ingin berbagai ilmu mengenai materi SASS.
Sebelumnya saya ingin me-review dulu tentang CSS. Sebagai web developer, pasti teman-teman semua udah tau dong apa itu CSS? Jika dianalogikan sebuah rumah, maka CSS sendiri adalah properti yang ada di dalam rumah itu. Dengan kata lain, CSS sendiri akan memepercantik sebuah halaman web agar terlihat menarik dan elegan.

Yuk langsung saja. Penasaran kan? Simak penjelasannya dibawah ini.

Apa itu 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

CSS Preprocessor seperti SASS adalah alat bantu kita sebagai web developer dalam penulisan kode CSS yang lebih terstruktur dan lebih cepat dengan bantuan variabel, mixins atau nesting. Sedangkan untuk implementasinya kita tetap menggunakan file CSS hasil dari compiling sass bukan file .scss/.sass itu sendiri.

File .scss hanya untuk proses pembangunan/development agar lebih mudah ketika ingin melakukan maintenance/perubahan terhadap style. Seperti yang saya sebutkan sebelumnya, kita hanya perlu merubah nilai variabel atau merubah mixins yang telah kita buat.

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.

Variable
Kita bisa mendefinisikan sebuah variable dan memanggilnya pada baris dimanapun kita butuhkan, juga kita bisa menggunakan perhitungan matematika sederhana.

Nesting
Jika kita pakai Sass maka akan memungkinkan kita menulis baris kode yang bertingkat dengan hasil compile yang rapi dan mudah di pahami

Mixin
Mixin lebih bagus dari Variable yang memungkinkan kita menggunakan kembali potongan kode css. misalkan jika kita banyak menggunakan rounded corner, maka tinggal dibuatkan sebuah mixin dan bisa kita panggil/pakai berulang.

Selector Inheritance
Dengan selector inheritance kita dapat menggunakan properties yang sama dan membedakannya tanpa duplikasi css.

Langkah Compile File SASS(.scss) ke CSS (.css)

Persiapan Compile SASS/SCSS ke CSS

  1. Pastikan komputer/laptop Anda sudah terpasang Ruby (untuk Windows maupun Linux bisa di download dulu). Tetapi untuk Mac biasanya sudah tersedia.
  2. Comand Prompt (cmd)

Cara instalasi SASS

Pertama kali yang dilakukan adalah membuka cmd. Lalu tentukan directory dimana kita kan menggunakan sass tersebut.

install4

Jika telah memiliki aplikasi Ruby yang telah diperintahkan sebelumnya, maka akan diikuti dengan instalasi gem. Karena untuk melakukan instalasi SASS, kita hanya perlu memerintahkan gem untuk melakukan instalasi, dengan perintah berikut:

install5

Dan hasilnya adalah seperti berikut ini (sebagiah hasil copy perintah gem install sass):

install6

Selesai instalasi, coba jalankan perintah sass -h untuk memastikan SASS telah terinstalasi dengan benar (sebagian hasil copy perintah sass –h)

install7

Penggunaan SASS

Untuk menggunakan SASS, kita perlu membuat sebuah file baru dan melakukan proses output-input dengan cara meng-compile file tersebut. Ekstensi file yang digunakan oleh SASS adalah .scss. Lalu buatlah file baru dengan nama style.scss, dan isikan kode berikut:

7

Setelah itu buatlah sebuah file baru dengan nama style.css. Maka secara otomatis file style.css tersebut akan terisi dan ter-compile otomatis dengan sebuah kode baru, yaitu:

install8

Bagaimana guys?  Mudah bukan, mari sama-sama mencoba 🙂

Sekian dan Terimakasih atas waktunya guys.

Referensi

http://belajarwebdesign.com/webdesign/karena-css-terlalu-mainstream-saatnya-kamu-kenalan-dengan-compass-sass/

http://www.ariona.net/mengenal-css-preprocessors-dan-sass/

https://bertzzie.com/post/27/instalasi-dan-pengunaan-sass

Save

Leave a Reply

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

WordPress spam blocked by CleanTalk.