Как повторить такое в SCSS?

Question

[Александр Васильев]

В Less я пишу
@320: ~"screen and (max-width: 767px)";
и применяю так

.account {
  display: flex;
    @media @320{
        display: none;
    }
}

Как повторить аналогию короткой записи в scss?

Comments

[black1277]

Медиазапросы в SCSS

[Александр Васильев]

black1277, благодарю

Answer 1

[Ankhena]

$lg: 720px;

@mixin _lg {
  @media (min-width: $lg) {
    @content;
  }
}

.tt {
color: red;
@include _lg {
      color: green;
    }
}

Comments

[Александр Васильев]

Опытным путем получил такое:
$value: "screen and (max-width: 767px)";

и после вызова переменной в компоненте,
@use "@styles/utils/vars";

используется так:

h1 {
  ....
        @media #{vars.$value} {
            display: none;
        }
}

осталось только понять, как не вызывать в компонентах каждый раз переменные, но это другой вопрос ))

[Ankhena]

Александр Васильев, для заголовков не стоит использовать display: none, лучше паттерн visually-hidden (гуглится)

[Александр Васильев]

Ankhena, это абстрактный пример

[Ankhena]

Александр Васильев, я надеялась, но на всякий написала))