Сохранить медиа-запрос в переменной

Question

Можно ли сохранить медиа-запрос как переменную?

Это не работает:

$max: @media (max-width: 980px) and (min-width: 768px);

Я не ищу, как сохранить максимальную ширину и минимальнуюширина, но целая строка.

Answer 1

Используйте что-то вроде этого

  @mixin respondTo($media) {
    @if $media == smallScreen {
      @media only screen and (max-width: $screenSmall - 1) { @content; }
    } @else if $media == mediumScreen {
      @media only screen and (max-width: $screenMedium) and (min-width: $screenSmall) { @content; }
    } @else if $media == largeScreen {
      @media only screen and (min-width: $screenXlarge) { @content; }
    }
  }

Тогда вы можете сделать что-то вроде следующего:

.products {
  @include respondTo(smallScreen) {
    width: 300px;
  }

  @include respondTo(mediumScreen) {
    width: 700px;
  }
}

Answer 2

Начиная с Sass 3.2, вы можете хранить медиа-запрос в такой переменной:

$bp-small: "(min-width: 30em)";

@media #{$bp-small} {
    .foo {
        color: red;
    }
}