tutorial sass penggunaan rules dan directives

Tutorial SASS Part 3 : Penggunaan Rules dan Directives


Tutorial SASS Part 3 : Penggunaan Rules dan Directives – hallo sahabat malasngoding, pada kesempatan ini saya akan membahas mengenai penggunaan rules dan directives pada sass.

Penggunaan Rules dan Directives

dalam sass, ada beberapa rules dan directives yang bisa kamu gunakan untuk mempermudah dalam menggunakan sass ini. apa itu 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 :

  1. 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 :

    Penggunaan Rules and Directives

    struktur project sass

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

    saya rasa untuk syntax yang ada dalam file index.html ini sudah mengerti karena berisi perintah html yang biasa digunakan.
    variabel.scss

    dalam file variabel.scss ini akan kita tempatkan semua variabel yang akan kita gunakan untuk  file .scss lain. jadi kita pisahkan biar gak ribet nantinya kalo menangani project yang besar yang memiliki banyak file-file yang lain.
    layout.scss

    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 :

    Penggunaan Rules and Directives

    proses running

    berikut tampilan hasil dari project yang sudah kita buat :

    Penggunaan Rules and Directives

    Penggunaan Rules and Directives

    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

oke, sekian dulu Tutorial SASS Part 3 : Penggunaan Rules and Directives, kita lanjutkan pada tutorial part 4.

salam malasngoding.com

Incoming search terms:

  • pemanggilan sass




About the author
Muzanni

love mobile development


Discussion
  • No Comment

Write a Comment

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