создать пользовательскую точку останова для медиа-запроса

Question

Я пытаюсь создать несколько общих точек останова для медиазапросов в моем угловом приложении. Я использую scss. Я повторяю эти 3 строки везде, и я хочу улучшить это:

@media screen and (orientation: landscape) and (max-width: 959px), 
  screen and (orientation: portrait) and (max-width: 599px) {

@media screen and (orientation: landscape) and (max-width: 959px) {

@media screen and (orientation: portrait) and (max-width: 599px) {

Я хочу создать некоторые переменные для включения этого, но я не получаю его, это должно быть что-то вроде:

$mobile = "screen and (orientation: landscape) and (max-width: 959px), 
  screen and (orientation: portrait) and (max-width: 599px)"
$landscape_mobile = "screen and (orientation: landscape) and (max-width: 959px)"
$portrait_mobile = "screen and (orientation: portrait) and (max-width: 599px)"

можно ли это сделать?

Answer 1

Вы можете создать миксин и использовать его, когда захотите

@mixin breakpoint($point) {
  @if $point == desktop {
    @media (min-width: 1400px) { @content; }
  }
}

// Use like this
div {
  @include breakpoint(desktop) {
    display: none;
  }
}

Answer 2

Переменные определяются с использованием :, а не =.

Вы можете использовать их следующим образом:

$mobile: "screen and (orientation: landscape) and (max-width: 959px), 
  screen and (orientation: portrait) and (max-width: 599px)";
$landscape_mobile: "screen and (orientation: landscape) and (max-width: 959px)";
$portrait_mobile: "screen and (orientation: portrait) and (max-width: 599px)";

@media #{$mobile} { ... }
@media #{$landscape_mobile} { ... }
@media #{$portrait_mobile} { ... }

Обратите внимание на синтаксис интерполяции #{}.
Подробнее о интерполяции Sass