Less CSS — как перестать писать правила адаптивного дизайна дважды?

Question

[zencd]

Сейчас в Less CSS мне приходится писать код дважды, что расстраивает:

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

Вопрос: можно ли уменьшить дубликацию кода, как ниже? Хорошо если с помощью Less CSS, но не обязательно.

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

Comments

[Одиночка Айс]

Пипец, а написать отдельным файлом responsive.css карма не позволяет?

Answer 1

[Алексей Бульба]

Давно не использовал Less, но Sass позволяет писать так:

div {
  margin: 10px;

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

P.S. Styles по-моему так же разрешает

Comments

[Евгений Калибров]

В less тоже так можно