Belajar Dasar Mixin dan Include Pada SASS

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.

19 Maret 2016

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Kursus Postgre SQL Database Developer Terbaik 2024 di Jakarta
chat