Penggunaan Blok Kod untuk Pseudokelas dalam LESS

Mari kita buat fungsi yang akan menetapkan gaya untuk pautan dalam keadaan hover.

Biarkan fungsi ini menerima blok kod sebagai parameter:

styles.less.hover(@code) {
  
}

Mari kita keluarkan blok kod yang diteruskan di dalam keadaan hover:

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

Gunakan fungsi kami di dalam pautan:

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

Hasil kompilasi:

styles.cssa {
  color: red;
}
a:hover {
  color: blue;
  text-decoration: none;
}
Задание 1

Buat fungsi serupa yang akan menetapkan gaya untuk input dalam keadaan focus.