Можете ли вы назвать ширину устройства как переменную в SCSS?

Question

Здравствуйте, я довольно новичок в SCSS, я все еще изучаю его, и я нахожу его очень уникальным и помог бы мне в те времена, когда мне нужен динамический дизайн в ближайшем будущем.

Мне любопытно, если вы можете вызвать ширину устройства как переменную, чтобы вы могли задать медиазапрос после того, как ширина устройства была обнаружена.

Если это возможно, то как? мне нужно больше, чем SCSS помимо HTML, CSS, чтобы сделать это? Спасибо!

$hamb: 991px;
$mmenu: 992px;

@if max-width <= $hamb {
.hamburger{
    display:block;
}
.m-menu{
    display:none;
}
}

@else if max-width >= $menu {
.hamburger{
    display:none;
}
.m-menu{
    display:block;
}
}

Answer 1

Медиа-запрос будет или не будет применяться в зависимости от ширины вашего окна просмотра.В вашем (S) CSS вы должны решить, что делать в случае по умолчанию, и , если условие (я) каждого MQ истинно, а затем в браузере CSS будет или не будет применяться в зависимости оттекущие условия).MQ эквивалентны условиям ifs (у вас также есть и, или, и нет, комбинации).

В методологии Mobile First вам потребуется только 1 медиазапрос и 1 переменная:

$breakpoint: 992px;

.hamburger {
    display: block;
}

.m-menu {
    display: none;
}

@media (min-width: $breakpoint) {
    .hamburger {
        display: none;
    }

    .m-menu{
        display: block;
    }
}

Первые 2 правила вне любого MQ применяются по умолчанию.
Следующие 2 правила в MQ переопределяют прежние правила, потому что 1 / они имеют те же селекторы и свойства, и2 / та же специфичность и наступить после .

Answer 2

Попробуйте этот код в SCSS, чтобы определить ширину устройства

$hamb: 991px;
$mmenu: 992px;
    @media screen and (max-width: $hamb){
        .hamburger{
            display:block;
        }
        .m-menu{
            display:none;
        }
    }
    @media screen and (min-width: $menu) {
        .hamburger{
            display:none;
        }
        .m-menu{
            display:block;
        }
    }