Less CSS - How to Stop Writing Responsive Design Rules Twice?

Question

css

Now in Less CSS I have to write the code twice, which is frustrating:

// правила для малых экранов
div {
  margin: 10px;
}
@media (min-width : 400px) {
  // правила для широких экранов
  div {
    margin: 20px;
  }
}

Question: Is it possible to reduce code duplication like below? It's good if using Less CSS, but not necessarily.

// правило описывается однажды
div {
  margin: @margin;
}
@margin: 10px;
@media (min-width : 400px) {
  @margin: 20px;
}

Answer 1

Haven't used Less in a while, but Sass allows you to write like this:

div {
  margin: 10px;

  @media (min-width : 400px) {
    margin: 20px;
  }
}

PS Styles, in my opinion, also allows