Mixin dalam LESS

Dalam pelajaran ini, kita akan berkenalan dengan mixin (pencampuran), yang memungkinkan untuk menyertakan satu kelas ke dalam kelas lainnya. Mari kita pahami, apa itu dan bagaimana cara menggunakannya.

Pada dasarnya, mixin adalah penggunaan satu kelas di dalam kelas lain, di mana satu kelas bertindak sebagai template - sepotong kode tertentu, yang dapat kita gunakan di banyak tempat.

Apa keuntungannya? Dalam CSS murni, kita harus mengetik template kode di setiap tempat yang membutuhkannya, sedangkan dalam LESS kita dapat menuliskannya di satu tempat dan kemudian menghubungkannya ke bagian kode yang diperlukan.

Mari kita lihat sebuah contoh. Misalkan kita memiliki kelas berikut:

.mix {
	width: 100px;
	height: 100px;
}

Mari kita gunakan kelas ini sebagai mixin:

p {
	.mix;
	color: red;
}

Hasilnya, setelah kompilasi, gaya dari kelas kita akan disisipkan ke dalam paragraf:

p {
	width: 100px;
	height: 100px;
	color: red;
}

Jelaskan, apa hasil kompilasi dari kode berikut:

.mix {
	color: white;
	background: black;
}

p {
	.mix;
	width: 300px;
}