Mixin dalam LESS

Dalam pelajaran ini, kita akan berkenalan dengan mixin (pencampuran), yang membolehkan satu kelas disertakan ke dalam kelas yang lain. Mari kita fahami apa itu dan bagaimana untuk menggunakannya.

Pada asasnya, mixin ialah penggunaan satu kelas di dalam kelas yang lain, di mana satu kelas bertindak sebagai templat - sebahagian kod tertentu, yang boleh kita gunakan di banyak tempat.

Mengapa ini mudah? Dalam CSS tulen, kita terpaksa menaip templat kod di mana-mana sahaja ia diperlukan, manakala dalam LESS kita boleh menulisnya di satu tempat dan kemudian menyambungkannya di tempat yang diperlukan dalam kod.

Mari kita lihat contoh. Katakan kita mempunyai kelas berikut:

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

Mari kita gunakan kelas ini sebagai mixin:

p {
	.mix;
	color: red;
}

Hasilnya, selepas kompilasi, gaya dari kelas kita akan dimasukkan ke dalam perenggan:

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

Terangkan, apakah hasil kompilasi kod berikut:

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

p {
	.mix;
	width: 300px;
}