Belajar Dasar Cara Penggunaan SASS

Hai semuanya bertemu lagi dengan saya didumet blog. Jika teman teman mau belajar SASS teman teman bisa lihat websitenya pada sass-lang.com yang akan dilihatkan basic-basic SASS nya dari documentationnya. Langsung saja kita mulai pada SASS ada dua penulisan yang pertama namanya SASS contohnya sebagai berikut

pada penulisan diatas tidak menggunakan titik koma dan kurung kurawal sedangkan SCSS seperti menulis CSS biasa

jadi teman teman bisa tentukan gunakan yang mana dan pastikan konsisten intinya sama aja dari kedua penulisan tersebut. Sebelum kita buat struktur filenya yang pertama kita akan lihat dasarnya sendiri cara menggunakan SASS seperti apa. Kita akan buat struktur HTMLnya dan buat satu file CSSnya seperti biasa

jadi pada style.css tidak kita ubah sama sekali yang bakal kita gunakan sendiri ada di satu file yang formatnya .scss yang saya kasih nama master.scss. Kita definisikan variabelnya dulu yang punya nilainya masing masing

untuk nama variabelnya bebas seperti halnya bahasa program. Selanjutnya kita berikan font-family pada elemen H1 yang nilainya kita ambil dari variabel yang kita definisikan

Jika teman teman lihat pada style.css nya masing kosong. Untuk mengcompilenya kita ke comand line dan pastikan berada pada didalam folder SASSnya. Penulisannya ketik kata sass lalu sumber filenya dari mana dan kita mau transfer atau kirimkan ke style.css Jadi ketikkan pada terminalnya seperti ini

Jika berhasil pada style.css akan otomatis kita dapatkan hasil yang kita inginkan.

Jadi kesimpulannya kita akan ubah di master.scss dan hasilnya akan ada di style.css maka kita akan lihat hasilnya pada browser. Satu lagi setiap kita mau mengubah tidak akan otomatis tampil pada style.css maka dari itu kita belajar satu option pada SASS yaitu --watch

dimana --watch ini untuk mengawasi file master.scss. Jadi setiap kita melakukan perubahan atau menambahkan maka secara otomatis tersimpan pada file style.css. Semoga bermanfaat