Как правильнее писать стили в less для всех страниц и отдельно для конкретной страницы?

Question

[lagudal]

Суть: например, имеется блок поиска, который на всех страницах сайта стилизован одинаково, а на главной есть 3-4 отличия. Но в общем для него стилей довольно много, в зависимости еще и от медиа запросов.
Так вот, отличия для главной небольшие, и описать я могу все довольно легко, добавив класс характерный для этой главной. Но класс этот находится выше, т.е. получается, что сначала я описываю все вложенные элементы, а потом, добавив класс находящийся по иерархии выше, вынужден снова описывать все вложенные уже с этим классом.
Пример кода, в котором только начало иерархии.
чтобы получить CSS вида

@media only screen and (max-width: 767px) { 
  header.page-header {
    margin-bottom: 65px; /* for all pages */
  }
  .cms-index-index header.page-header {
    margin-bottom: 0; /* for homepage*/
  }
}

Я пишу

@media only screen and (max-width: 767px) { 
  header {
    &.page-header {
      margin-bottom: 65px; /* margin-bottom für alle Seiten */
    }
  }
  .cms-index-index {
    header {
      &.page-header {
        margin-bottom: 0; /* margin-bottom für die Startseite */
      }
    }
  }
}

далее в классе page-header есть еще 6 или 7 вложений с ответвлениями, и в самой глубине есть специфические отличия для cms-index-index.
Вот те есть подумал, так и продолжать писать эти 2 ветви, либо есть какой то способ сократить код?

Answer 1

[Сергей Карвасарный]

ничерта не понял но ладно) Думаю, ты это имел введу - ты можешь сделать себе миксин вот на примере кнопки, типа такой вариант просто в низу перебивать стили, еще вариант можно сделать вместо значений типа font-size: 18px; сделать передачу переменной $size = 200px; font-size: $size; но я обычно перебиваю, переменные редко получается рационально использовать

@mixin btn {
    position: relative;
    margin: 60px 0 0;
    padding: 18px 35px;
    @include btn-gradient;
    font-size: 13px;
}

header {
.btn {
  @Include btn;
}
}
footer {
.btn {
  @Include btn;
margin: 120px 0 0;
 font-size: 13px;
}
}