Media Queries in LESS

Let's make a function that will add a media query to the element. Let's say this is a query that regulates styles for mobile devices. Let's name our function accordingly:

styles.less.mobile(@code) {

}

Our function will take a block of code as a parameter. Let's output this block inside a media query:

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

Now let's use our function:

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

As a result, after compilation, our div will be inside the media query, receiving the corresponding styles:

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