Ошибка scss ожидается медиа-запрос

Question

Я делаю Scss Mixin для медиа-запроса

@mixin breakpoints($min-width, $max-width, $media-type: false) {
  @if $media-type == true {
    @media $media-type and (min-width: $min-width) and (max-width: $max-width) {
      @content;
    }
  } @else {
    @media all and (min-width: $min-width) and (max-width: $max-width) {
      @content;
    }
  }
}

$media-type по умолчанию false, если я не хочу указывать его при вызове mixin. Если $media-type передается в mixin, то я хочу, чтобы эта переменная была напечатана после @media. Так что, если я включу миксин @include breakpoints(400, 600, only screen)в результате я хочу @media only screen and..

когда я пытаюсь проверить мой миксин на sassmeister, я получаю эту ошибку:

Invalid CSS after "    @media ": expected media query (e.g. print, screen, print and screen), was "$media-type and..."

Что я делаю неправильно?

Answer 1

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

@mixin breakpoints($min-width, $max-width, $media-type: false) {
  @if $media-type {
    @media #{$media-type} and (min-width: $min-width) and (max-width: $max-width) {
      @content;
    }
  } @else {
    @media all and (min-width: $min-width) and (max-width: $max-width) {
      @content;
    }
  }
}

ключ был в #{$media-type}. сейчас все работает, но я не знаю, насколько правильное мое решение.

Теперь я могу позвонить в Mixin с

@include breakpoints(400, 600, only screen)

а также

@include breakpoints(400, 600, 'only screen')

а также

@include breakpoints(400, 600)

который вернет ключевое слово all

Answer 2

Sass не понимает, что вы пытаетесь сделать, когда вы возвращаетесь в переменную $media-type. Вам нужно будет установить оператор if для каждого типа медиа, например:

@mixin breakpoints($min-width, $max-width, $media-type: false) {
  @if $media-type == print {
    @media print and (min-width: $min-width) and (max-width: $max-width) {
      @content;
    }
  } @else {
    @media all and (min-width: $min-width) and (max-width: $max-width) {
      @content;
    }
  }
}