Tutorial SASS Part 2 : Syntax Dasar SASS dan SCSS

"Tutorial SASS Part 2 : Syntax Dasar SASS dan SCSS"

Fansyah dwi krisnady November 30, 2024

syntax atau code program setiap bahas pemrograman itu beda. namun ada beberapa jenis bahasa pemrograman yang hampir mirip penulisannya. kali ini kita akan mempelajari syntax dasar dari sass dan scss. seperti yang sudah di bahas dalam tutorial sass part 1, sass ini memiliki 2 model penulisan yaitu model sass dan scss. kedua model ini memiliki penulisan yang agak sedikit berbeda.

oke, langsung ke materi pengenalan sytax dasar SASS :

SCSS memiliki sedikit perbedaan dengan sass meskipun pada intinya sama penggunaannya, berikut contoh penulisan dari scss :

buatkan 3 buah file dengan nama index.html, style.css dan belajar.scss
file yang akan di kerjakan index.html dan belajar.scss. sedangkan style.css tidak akan kita sentuh sedikit pun.
fungsi style.css disini merupakan tempat dimana hasil yang sudah di buat pada belajar.scss akan berada di sini. jadi perlu di ingat bahwa sass/scss ini untuk mempercepat kerjaan css yang kita buat.

untuk lebih jelas perhatikan contoh berikut :

See the Pen Untitled by Fansyah Dwi Krisnady (@fansyah98) on CodePen.

sedikit penjelasan untuk belajar.scss. jadi ide dari sass/scss kita membuat sebuah variabel, dan variabel itu kita akses pada saat kita butuhkan aja. misalnya kita membuat sebuah variabel warna ($warna:ungu), pada saat kita perlukan warna misanya pada background kita tinggal memanggil variabel warna ($warna).

oke, setelah kita kerjakan 2 file yang tadi, selanjutnya kita mengkompile file belajar.scss cara nya : buka cmd, pastikan kita berada pada folder project yang kita buat sebelumnya dan ketik perintah berikut :
perintah cmd yang akan digunakan untuk keperluan sass ini dapat kamu lihat dengan mengetika perintah bantuan pada cmd

Syntax Dasar Model SASS :

seperti yang sudah saya jelakan sebelumnya code program untuk SASS ini agak agak sedikit berbeda dari scss, untuk lebih jelas perhatikan contoh berikut :

buat 3 buah file index.html, belajar.sass, dan style.css
index.html dan belajar.sass yang akan kita kerjakan

See the Pen Untitled by Fansyah Dwi Krisnady (@fansyah98) on CodePen.

sekian dari saya tutorial semoga bermanfaat untuk belajar kalian terimakasih,
tetep terus semangat belajar ya,