Tutorial SASS Part 3 : Penggunaan Rules dan Directives

"Tutorial sass dengna menerapkan aturan penulisan directives dan rules dalam membuat sebuah progam dan pengaksesan file lain di sass direktori"

Fansyah dwi krisnady Desember 04, 2024

Logo Sass

Penggunaan Rules dan Directives

rules merupakan aturan-aturan penulisan dalam sass, maksudnya disini sass mendukung semua aturan penulisan pada css3. sedangkan directives merupakan arahan atau perintah, maksudnya disini sass menambahkan beberepa perintah yang digunakan untuk mempermudah baik dalam penulisan, maupun pengksesan file lain. ada beberapa directive yang digunakan sass dan akan kita bahas pada part-part selenjutnya.

berikut akan saya bahas beberapa penggunaan rules dan

directive yang sering dijumpai pada sass :

import

import merupakan suatu fungsi pada sass yang digunakan untuk pemanggilan file lain. untuk lebih jelasnya perhatikan contoh berikut :
perhatikan struktur peoject yang saya buat :

Baca Juga : Kenapa Hingga Saat Ini Pemerintah Masih Menolak Perilisan iPhone 16 Series di Indonesia?

disni kita akan mengerjakan file index.html, main.scss, variabel.scss, layout.scss. sedangkan file style.css tidak akan kita ganggu sama sekali.

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

file layout ini berfungsi untuk membuat tampilan, misalkan kita akan menganti warna font untu p, disini kita kan menggantikannya, sedangkan untuk warna-nya sudah kita deklarasikan terlebih dahulu di variabel.scss. saya rasa sudah jelas untuk file layout.scss

main.scss

pada main.scss ini kita menggunakan @import untuk memanggil seluruh file .scss lainnya. fungsinya supaya pada saat kita menjalankan project kita tidak perlu menjalankan suluruh file .scss lain, kita hanya perlu menjalakan file main.scss saja.
oke, kita run : gunakan perintah

sebelumnya pastkan dulu di cmd nya sudah berada pada directory project :

untuk hasil hasil style.css nya sendiri dapat anda lihat, sudah berisi syntax dengan sendirinya setelah kita menjalankan project tadi :

saya rasa untuk pembahasan penggunaan rules dan directives import pada sass sudah jelas. untuk directives yang lain daat anda lihat documentasinya di website resmi sass : http://www.sass-lang.com

terimakasih semoga bermanfaat

Referensi :

malasngoding.com