Media Queries katika LESS

Wacha tutengeneze kitendo ambacho kitaongeza kipengele cha media query. Wacha kwa mfano hii iwe ombi linalodhibiti mitindo kwa vifaa vya rununu. Wacha tuitaje kitendo chetu ipasavyo:

styles.less.mobile(@code) {

}

Kitendo chetu kitachukua kizuizi cha msimbo kama kigezo. Wacha tuonyeshe kizuizi hiki ndani ya media query:

styles.less.mobile(@code) {
  @media (max-width: 600px) {
    @code();
  }
}

Sasa tutumie kitendo chetu:

styles.lessdiv {
  .mobile({
    width: 300px;
  });
}

Kama matokeo baada ya kukusanya, div yetu itakuwamo ndani ya media query, na kupata mitindo inayofanana:

styles.less@media (max-width: 600px) {
  div {
    width: 300px;
  }
}