jetfx
@jetfx

Как заставить стили медиазапросов перебивать вложенные правила(стили) Less?

Использую такую фишку препроцессора Less как вложенность стилей. Очень часто для удобства задаю стили вложенных HTML-элементов также во вложенном виде, чтобы можно было прямо из файла стилей понимать структуру страницы.

Пример:
<div class="event">
    <h2 class="event__caption">Игра в футбол</h2>
    <p class="event__description">Сегодня состоится товарищеский матч по футболу</p>
</div>

.event {
    width: 300px;
    height: 100px;
    
    .event__caption {
      color: blue;
    }

    .event__description {
      color: green;
    }
  }


Однако есть проблема, когда занимаюсь адаптивной версткой. Вложенные стили таких элементов после компиляции превращаются в длинные комбинированные селекторы, которые оказываются более специфичными, чем стили из медиазапросов. Соответственно, если, например, в медиазапросе переопределить цвет для заголовка карточки события .event__caption { color: red}, новый цвет не сможет перебить старый. Разумеется, стили медиазапросов подключались мной после скомпилированных стилей Less. Сейчас решаю данную проблему добавлением !impotant к стилям из медиазапросов. От вложенности Less отказываться не хочется, так как удобно. Подскажите, пожалуйста, есть ли более правильный метод решения данной проблемы? Чувствую, у меня получился костыль.
  • Вопрос задан
  • 132 просмотра
Решения вопроса 1
Seasle
@Seasle Куратор тега CSS
.event {
  width: 300px;
  height: 100px;
  
  &__caption {
    color: blue;
  }

  &__description {
    color: green;
  }
}

@media screen and (max-width: 768px) {
    .event {
        &__caption {
            color: red;
        }
    }
}

или
.event {
  width: 300px;
  height: 100px;
  
  &__caption {
    color: blue;
    
    @media screen and (max-width: 768px) {
      color: red;
    }
  }

  &__description {
    color: green;
  }
}
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
iiiBird
@iiiBird Куратор тега CSS
Пока ты спишь - твой конкурент совершенствуется
пиши так, чтобы вложенности не было:
.event {
    width: 300px;
    height: 100px;
    
    &__caption {
      color: blue;
    }

    &__description {
      color: green;
    }
  }
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы