Belajar Mixins pada SASS CSS

Hallo teman-teman bertemu lagi di panduan Source Code Aplikasi, di kesempatan kali ini kita akan belajar mengenai apa itu Mixins di SASS.

Mixins di SASS atau dapat pun kita sebut guna, yang bermanfaat bagi mengerjakan sebuah operasi atau proses hanya dengan memanggil satu guna saja, nah mungkin dari sini teman teman masih bingung, sekarang ini kita coba pada satu study case , disini misal kita ingin mengatur radius atau kelengkungan dari sebuah element div dengan id kotak, nah seperti penulisan CSS biasanya kita pasti akan menuliskan script seperti berikut :

#kotak{
border-radius:20px;
-o-border-radius:20px;
-ms-border-radius:20px;
-moz-border-radius:20px;
-webkit-border-radius:20px;
}

Nah jikalau kita menemukan kondisi seperti ini, kita dapat membangun guna mixins khusus bagi border-radius contoh script nya yakni seperti berikut:

@mixin border_radius($radius :20px){
border-radius: $radius;
-o-border-radius: $radius;
-ms-border-radius: $radius;
-moz-border-radius: $radius;
-webkit-border-radius: $radius;
}

Nah sekarang ini bagi memanggil guna mixins di atas kita dapat menggunakan guna @include diikuti dengan nama guna, contoh scriptnya yakni selaku berikut:

#kotak{
@include border_radius(20px);
}

Bagaimana? gampang bukan kita hanya perlu memanggil guna mixins dan diikuti oleh nama fungsinya.

Oke teman-teman lumayan sekianlah artikel kali ini, semoga bermanfaat.

Terimakasih.

Sumber https://kursuswebsite.org