Widget HTML Atas

Hosting Unlimited Indonesia

Tutorial Sass | Belajar Sass Dari Dasar Lengkap dan Mudah



Belajar Sass Dasar dan Lengkap - Sass adalah bahasa scripting yang memudahkan Anda untuk menulis CSS dengan lebih mudah dan efisien. 

Ada 2 cara untuk menulis Sass, sintaksis SASS dan sintaksis SCSS. Disini kita menggunakan sintaksis SCSS, yang mana adalah sintaksis yang lebih umum. 

File ekstensinya adalah .scss dan bukan .css.

Manfaat Menggunakan SASS:

  1. Lebih Singkat dari CSS
  2. Sintaks Bisa dipakai Ulang
  3. Mempercepat proses development


Instalasi



Instalasi Sass bisa anda cek disini, anda bisa menggunakan Visual studio code dan tambahkan plugin watch saas atau bisa pakai Codepen agar tidak perlu install hanya cukup setting sedikit saja.


Struktur Nesting (Sarang)



Pertama, mari kita lihat struktur nesting yang sering digunakan dalam Sass. Dengan nesting, Anda dapat menulis ulang CSS seperti dicontohkan di bawah. 

Dengan cara ini, Sass memungkinkan Anda untuk nesting (menyarang) selector pada selector lain. 

Jadi, dengan Sass, Anda tidak perlu untuk menulis selector yang sama berulang kali.

Semakin besar site, makin berguna nesting. Terutama ketika melakukan perubahan pada nama class. Jika Anda ingin mengubah nama class header pada contoh di bawah, Anda harus melakukan perubahan di 3 lokasi dengan CSS normal, namun dengan Sass Anda hanya perlu melakukan satu perubahan.

Anda bisa coba test seperti kode dibawah: 

See the Pen Nesting di Sass by Muhammad Ihsan (@gigsaws) on CodePen.

Menggunakan Hover



Keadaan dimana kursor berada di atas element disebut hover. Pada CSS, dengan selector:hover, Anda dapat menerapkan CSS spesifik saat kursor menghover sebuah element.

Dengan menggunakan active dengan selector, CSS dapat diterapkan hanya jika element diklik. Ini dapat dilakukan dengan sintaksis: selector:active.

Dengan nesting, Anda dapat menulis ulang selector:hover sebagai &:hover, seperti ditunjukkan di bawah. Ingat bahwa & bisa digunakan dengan selector apapun - hover, active, dan lain-lain.


Contoh penggunaan :hover dan :selected bisa anda lihat dan coba dibawah ini:


See the Pen & Hover Selected Sass by Muhammad Ihsan (@gigsaws) on CodePen.

Menerapkan CSS ke Element Spesifik

Saat Anda ingin menerapkan CSS ke tag <li> spesifik seperti pada contoh di bawah, Anda dapat menggunakan sintaksis element.class-name. Sintaksis ini sering digunakan untuk menerapkan CSS ke element spesifik diantara banyak lainnya.

Pada halaman sebelumnya, Anda belajar untuk mereferensikan element spesifik dengan mudah dengan simbol & pada Sass. 

Dengan CSS normal, Anda harus menulis nama element yang sama berulang kali, namun pada Sass Anda dapat menulisnya sekali sehingga mudah untuk mengaplikasikan code CSS berbeda ke element spesifik.

See the Pen Contoh & Selector li Saas by Muhammad Ihsan (@gigsaws) on CodePen.

Variable



Selanjutnya, kita akan belajar mengenai variable pada Sass. Bayangkan variable sebagai kotak yang mempunyai nilai. 

Gambar di atas mengilustrasikan bagaimana variable bekerja. Mereka berguna pada kasus dimana nilai yang sama dipakai berulang kali. Kita akan mempelajari lebih lanjut pada slide-slide berikutnya.

Cara Mendefinisikan Variabel 



Untuk menggunakan variable, Anda harus terlebih dahulu mendefinisikan mereka. Variable didefinisikan dengan sintaksis: $variable-name: nilai; seperti ditunjukkan di bawah. Anda dapat memikirkannya seperti "letakkan nilai di kanan ke variable di kiri", ini disebut assignment.



Menggunakan variable itu mudah. Cukup tulis nama variable, contohnya $progate-color, seperti terlihat di bawah. 

Dengan menulis nama variable di tempat dimana Anda ingin menggunakannya, value #26546a yang tersimpan di dalam variable akan otomatis disisipkan. 

Ini memungkinkan Anda untuk mereferensikan value yang sama dari tempat berbeda, membuatnya mudah untuk diubah.

Perlu diingat bahwa variable harus didefinisikan sebelum baris dimana ia digunakan. 

Karena style sheet (CSS) dibaca dari atas ke bawah, jika Anda mendefinisikan sebuah variable setelah baris dimana Anda ingin menggunakannya, error akan terjadi karena itu akan diinterpretasikan sebagai variable yang tidak terdefinisi.


Anda juga dapat menspesifikasikan jarak variable dapat digunakan. Jarak ini disebut scope. 

Anda tidak bisa menggunakan variable bahkan setelah mendefinisikannya jika variable berada di luar scope-nya. Maka dari itu, untuk variable-variable yang Anda ingin gunakan di keseluruhan code, variable tersebut harus didefinisikan di bagian terluar dari struktur nesting.


See the Pen Contoh Variable di SCSS by Muhammad Ihsan (@gigsaws) on CodePen.

Mixin

Sekarang kita akan melihat mixin, yang merupakan fitur yang sangat berguna dari Sass. Mixin adalah function yang memungkinkan Anda untuk menggabungkan baris-baris code dan menggunakannya kembali. Kita tidak perlu menulis code yang sama berulang kali dan dapat mengurangi duplikasi code.


Untuk menggunakan mixin, Anda harus mendefinisikannya terlebih dahulu. Sintaksis untuk mendefinisikan mixin adalah @mixin mixin-name {code} seperti ditunjukkan pada contoh di bawah.

Selanjutnya, mari lihat bagaimana menggunakan mixin setelah mendefinisikannya. Anda dapat menggunakan mixin pada file Sass dengan sintaksis @include mixin-name;. Saat Anda menggunakan @include, code dari mixin akan dimuat disana. Pada contoh di bawah, setelah mixin dipanggil, code di dalam .lesson-1 dan .lesson-2 akan sama.



See the Pen Contoh Mixin 1 SCSS by Muhammad Ihsan (@gigsaws) on CodePen.

mixin dengan Argument



Informasi seperti nilai warna dapat diteruskan ke mixin sebagai argument. Argument dapat digunakan untuk membuat code lebih dinamik dan biasa digunakan di dalam pemrograman. Dengan meneruskan nilai warna dan data lain sebagai argument pada mixin, mereka bisa digunakan didalam mixin.

Setelah menambahkan argument ke definisi mixin, Anda dapat meneruskan nilai ke mixin saat memanggilnya. Pada contoh di kanan, nilai #ff0000 diteruskan dan ditentukan ke $color pada mixin, ini dapat membuat code Anda lebih fleksibe



See the Pen Contoh Mixin 2 SCSS by Muhammad Ihsan (@gigsaws) on CodePen.

Function



Function kurang lebih bersifat universal di pemrograman. Anda juga dapat menggunakannya pada Sass untuk melakukan hal-hal seperti "ubah warna menjadi 50% lebih terang", sebagai contoh.

Berbagai macam function tersedia pada Sass. Sebagai permulaan, akan sangat berguna untuk mengingat beberapa function yang umum. Function umumnya digunakan untuk memanipulasi warna seperti ditunjukkan dibawah. Ada banyak function untuk memodifikasi warna. Mari kita pelajari.


See the Pen Contoh Function 1 di Saas by Muhammad Ihsan (@gigsaws) on CodePen.

Import

Mari mempelajari bagaimana memuat file-file eksternal dengan import. Agar suatu file dapat diimport, kita harus menambahkan _ diawal nama file. Selain itu, sintaksis umum untuk memuat file adalah @import filename seperti terlihat pada contoh di kanan.

Perlu diingat bahwa saat mengimport file, Anda dapat menghapus _ dan ekstensi file (.scss) seperti pada contoh di kanan


Metode populer yang banyak diadopsi dalam pengembangan website-website profesional adalah untuk membuat sebuah file dengan banyak definisi variable dan memuatnya dengan @import. Ini membuat variable mudah dijadikan acuan dan dilacak.

    
Bagi kalian yang ingin bermain variable di sass, saya ada sedikit contoh menarik dibawah ini :

https://codepen.io/gigsaws/pen/dyMwVyE

Mungkin itu saja, nanti kalau ada tambahan akan saya tambah, terima kasih :)

Hosting Unlimited Indonesia

IDCloudHost | SSD Cloud Hosting Indonesia