Главные стили css перекрывают media стили. В чем проблема?

Question

[broke boi]

Добрый вечер! Адаптирую сайт. При импорте медиа запросов они не работают и их перекрывают главные стили css.

@import "mixins"
@import "variables"
@import "general"
@import "media"

В general стили заданы изначально:

.menu
.menu_link
    color: #ffffff
    font-size: 15px
    font-weight: 300

  .menu_item
    border-right: 2px dotted rgb(49, 49, 49)
    padding-right: 28px
    &:last-child
        border-right: none

В медиа прописано следующее:

@media (max-width: 1200px)
    .menu
        &_item
            padding-right: 20px
        &_link
            font-size: 13px

В итоге в коде элемента:



Кто сталкивался с подобным, подскажите пожалуйста! Использую сасс, код пишу в VS, все необходимые меты подключил. Спасибо!

Comments

[theuser]

Ну так правильно,
.menu
&_item
сгенерирует только один класс .menu_item, а в general селектор сильнее идет - .menu .menu_item.
Оберни классом .menu то что внутри media

[broke boi]

Проблема решилась следующим образом:
вместо

@media (max-width: 1200px)
    .menu
        &_item
            padding-right: 20px
        &_link
            font-size: 13px

вписал вот это:

@media (max-width: 1200px)
    .menu
        .menu_item
            padding-right: 20px
        .menu_link
            font-size: 13px

С чем связано хз, может sass плохо скомпелировался или еще что то) Знатоки, если знаете - расскажите ;)

[imegaded]

Егор Калинин, https://developer.mozilla.org/ru/docs/Web/CSS/Spec...

[Антон Литвиненко]

Импорт медиа должен быть в конце файла после основных стилей

[broke boi]

Антон Литвиненко, так в general заданы основные стили, импорт медиа происходит после импорта general

[Froggyweb]

следующий добавит импортант в css to js

[FeST1VaL]

Егор Калинин, Так все правильно, как и написали в первом ответе. Просто у вас разные селекторы