Belajar Mixins pada SASS CSS

Hallo teman-teman bertemu lagi pada tutorial dumet school, pada kesempatan kali ini kita akan belajar tentang apa itu Mixins pada SASS.

Mixins pada SASS atau bisa juga kita sebut fungsi, yang berguna untuk melakukan sebuah operasi atau proses hanya dengan memanggil satu fungsi saja, nah mungkin dari sini teman teman masih bingung, sekarang kita coba dalam satu study case , disini misal kita ingin mengatur radius atau kelengkungan dari sebuah element div dengan id kotak, nah seperti penulisan CSS biasa 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 jika kita menemukan kondisi seperti ini, kita dapat membuat fungsi mixins khusus untuk border-radius contoh script nya adalah 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 untuk memanggil fungsi mixins di atas kita dapat menggunakan fungsi @include diikuti dengan nama fungsi, contoh scriptnya adalah sebagai berikut:

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

Bagaimana? mudah bukan kita hanya perlu memanggil fungsi mixins dan diikuti oleh nama fungsinya.

Oke teman-teman cukup sekian artikel kali ini, semoga bermanfaat.

Terimakasih.