การใช้บล็อกโค้ดสำหรับคลาสหลอกใน LESS

มาสร้างฟังก์ชันที่จะกำหนด สไตล์ให้ลิงก์ในสถานะ hover กัน

ให้ฟังก์ชันนี้รับพารามิเตอร์เป็นบล็อกโค้ด:

.hover(@code) {
	
}

มาทำให้บล็อกโค้ดที่ส่งเข้ามาถูกแสดงผลภายใน สถานะ hover กัน:

.hover(@code) {
	&:hover {
		@code();
	}
}

ลองใช้ฟังก์ชันของเราภายในลิงก์:

a {
	color: red;
	
	.hover({
		color: blue;
		text-decoration: none;
	});
}

ผลลัพธ์หลังการคอมไพล์:

a {
	color: red;
}
a:hover {
	color: blue;
	text-decoration: none;
}

ทำฟังก์ชันที่คล้ายกันนี้ขึ้นมา เพื่อ กำหนดสไตล์สำหรับอินพุตในสถานะ focus