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;
}
Задание 1

एक समान फ़ंक्शन बनाएं जो focus अवस्था में इनपुट के लिए स्टाइल सेट करेगा।