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

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

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

styles.less.hover(@code) {
  
}

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

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

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

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

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

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