Не работает код SASS и CSS адаптив?

Question

[Hanami Mirai]

Привет!
Почему то не работает код, в коде страницы показывает media screen and ( max-width: 768px ) хотя в css есть media screen and ( max-width: 425px )

Comments

[Ankhena]

Начните со сравнения селекторов на скринах.
На одном вы показываете правила для .info, на другом для .info .info-container .info__block (Зачем, кстати, вы пишете такую вложенность, когда достаточно просто .info__block)

К 15му вопросу уже можно было бы и ознакомиться с правилами ресурса и, вместо запрещенных скринов кода, начать делать песочницы на codepen.io или аналогах.
А куски кода в вопросе оборачивать в теги <code></code>

[Hanami Mirai]

Ankhena, хорошо, возьму это во внимание)
Но вы так и не дали ясного ответа, почему браузер не видит media screen and (max-width: 425px) хотя в sass и в css он есть

[Ankhena]

Hanami Mirai,

Но вы так и не дали ясного ответа

Вы не дали ясного вопроса ;)

Но еще раз медленно: на скринах вы показываете стили для разных элементов.

хорошо, возьму это во внимание)

Имеет смысл сделать это довольно быстро, пока модераторы не отправили ваш вопрос в мусорку за нарушение правил.

[Hanami Mirai]

Ankhena, код на sass, такую вложенность делает интерпретатор

[Hanami Mirai]

Ankhena, вопрос ясен, почему браузер не видит media screen and (max-width: 425px) хотя в sass и в css он есть

[Ankhena]

Hanami Mirai,

код на sass, такую вложенность делает интерпретатор

Нет. Такую вложенность пишете вы.
Сами себе усложняя жизнь при переопределениях, ни за что повышая специфичность.
И не только себе, но и тем, кому придется работать с кодом после вас.

SASS никого не заставляет писать такие вложенности.

[Ankhena]

Hanami Mirai,

вопрос ясен, почему браузер не видит media screen and (max-width: 425px) хотя в sass и в css он есть

ГДЕ на ваших скринах код для info__block для @media 425?

spoiler

[Hanami Mirai]

Ankhena,

@media screen and ( max-width: 425px )
    .info
        background-image: url(../../img/header/headerbg.jpg)
        background-repeat: no-repeat  
        background-position: center
        background-size: cover  
        font-family: 'Noto Sans'
        padding: 45px 0
        .info-container
            display: flex
            justify-content: space-between
            align-items: center
            .info__block
                display: flex
                flex-direction: column
                color: #fff
                &>i
                    color: #ffa500
                    font-size: 18px
                    margin: 10px 0
                    &>a 
                        color: #000
                        font-family: 'Noto Sans'
                        font-weight: normal
                        margin-left: 8px
                        text-decoration: none
                    .mail-none 
                        pointer-events: none
                
            .info__btn
                display: block
                .info__btn-link 
                    @include btn(15px, #fff, normal, #ffa500, 9px 35px,#ffa500,  19px)
                    &:hover
                        color: $colorOrang
                        background: none
                        transition: all .2s ease

[Ankhena]

Hanami Mirai, отлично.
А теперь это вместе со всем остальным, но только тем, что необходимо для иллюстрации проблемы, оформите на codepen.io

[Hanami Mirai]

Ankhena, даже лучше, проблема решена, просто написал 426, на 1px больше.
Я учту свои ошибки в будущем, это моя первая практическая работа в sass, если вы имеете годный материал по изучению sass, то попрошу вас скинуть на него ссылочку)

[Ankhena]

Hanami Mirai,

если вы имеете годный материал по изучению sass

Начните с CSS.
И заведите привычку заглядывать в скомпилированный CSS пока не начнете понимать, что вообще происходит.
Следите, чтобы там не получалось такой порнушки как сейчас.

[Hanami Mirai]

Ankhena, хорошо, спасибо за ответ!

[Ankhena]

Hanami Mirai, для SASS ничего кроме его документации не нужно.

Ваша проблема вызвана именно непониманием происходящего в CSS.
Почитайте про
https://css-live.ru/css/nikto-ne-znaet-css-specifi...
https://css-live.ru/css/pravilnaya-shpargalka-po-c...
https://developer.mozilla.org/ru/docs/Web/CSS/Spec...

Есть ещё статейка, я всегда сразу говорю, что далеко не со всем в ней согласна, да и возраст у неё уже приличный, но заставит задуматься https://csswizardry.com/2012/11/code-smells-in-css/
Например, подумайте, зачем вы задали display:flex для 768, а потом переопределили его снова на display:flex для 425.

И это до кучи: Критерии качества вёрстки 2021

Дальше, надеюсь, само пойдет :)
Удачи и успехов в изучении.

Answer 1

[imko]

Какой позже объявлен тот приоритетнее