Belajar Dasar Mixin dan Include Pada SASS

19/03/2016    Ekky Ridyanto    2535    Website

Halo teman teman pagi ini kita akan belajar satu fungsi lagi yang ada di SASS yaitu mixin dan include yang pertama kita atur SCSSnya agar lebih rapi lagi misalnya mau menghilangkan list-stylenya untuk itu kita bisa nulis seperti CSS biasa sebagai berikut

jika kita jalankan pada browser layout kita akan menjadi seperti berikut

sebelumnya kita sudah bahas @extend sekarang kita akan gunakan @include untuk memanggil suatu fungsinya dengan nilai parameter. Untuk membuat satu fungsi yang menerima parameter kita bisa gunakan metode mixin pada SASS seperti istilahnya bahasa pemrograman. Oke langsung saja yang pertama kita akan buat sebuah 3 tombol dengan warna yang berbeda

kemudian tombol tersebut saya akan tambahkan border radiusnya dimana property border radius tidak semua browser mendukungnya maka dari itu kita akan tambahkan vendor prefix yang kita buatkan di satu fungsi agar fungsi ini bisa panggil berulang ulang contohnya sebagai berikut

penulisannya kita gunakan metode @mixin lalu di ikuti dengan namafungsinya. Lalu pada _layout.scss. Untuk memanggil fungsi tersebut kita akan @include fungsi tadi pada class btn sebagai berikut

dengan nilai parameter 5px untuk border radiusnya. untuk memberikan backgroundnya kita definisikan seperti ini

hasil layout kita pada browser

itu dia intinya kita belajar @mixin yaitu fungsi yang menerima parameter. Parameter yang kita berikan bisa lebih dari satu. Selanjutnya pasangannya adalah @include untuk memanggil fungsi tersebut. terima kasih.

No data.