Media query expected ошибка

I’m trying to standardize the sizes of the devices on my scss, based on this:

/** Extra small devices (phones, 600px and down) */
$extra-small-evices: "screen and (max-width: 600px)",
/** Small devices (portrait tablets and large phones, 601px to 768px) */
$small-devices = 'screen and (min-width: 601px) and (max-width: 768px)',
/** Medium devices (landscape tablets, 769px to 991px) */
$medium-devices = 'screen and (min-width: 769px) and (max-width: 991px)',
/** Large devices (laptops/desktops, 992px to 1200px) */
$large-devices = 'screen and (min-width: 992px) and (max-width: 1200px)',
/** Extra large devices (large laptops and desktops, 1201px and up) */
$extra-large-devices = 'screen and (min-width: 1201px)'

After this, less say that I want to create a media query which the target is the small devices and medium devices:

@media $small-devices,
@media $medium-devices{
   ....
}

But I’m getting the following error on the @media $small-devices, line:

[scss] media query expected

Environment: Visual studio code, nodejs, angular 6, gulp,

Any one knows how no solve this?

I’m trying to standardize the sizes of the devices on my scss, based on this:

/** Extra small devices (phones, 600px and down) */
$extra-small-evices: "screen and (max-width: 600px)",
/** Small devices (portrait tablets and large phones, 601px to 768px) */
$small-devices = 'screen and (min-width: 601px) and (max-width: 768px)',
/** Medium devices (landscape tablets, 769px to 991px) */
$medium-devices = 'screen and (min-width: 769px) and (max-width: 991px)',
/** Large devices (laptops/desktops, 992px to 1200px) */
$large-devices = 'screen and (min-width: 992px) and (max-width: 1200px)',
/** Extra large devices (large laptops and desktops, 1201px and up) */
$extra-large-devices = 'screen and (min-width: 1201px)'

After this, less say that I want to create a media query which the target is the small devices and medium devices:

@media $small-devices,
@media $medium-devices{
   ....
}

But I’m getting the following error on the @media $small-devices, line:

[scss] media query expected

Environment: Visual studio code, nodejs, angular 6, gulp,

Any one knows how no solve this?

Вы должны сообщить SASS, что ваша строка не должна заключаться в кавычки и обрабатываться как обычный CSS:

@media #{unquote($small-devices)}{
    // Your output here
}

Вы все еще можете использовать несколько таких:

@media #{unquote($small-devices)},
       #{unquote($extra-small-devices)}{
    // Your output here
}

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

@mixin media( $selectors... ){

    $selector: '';

    @each $s in $selectors {

        @if $selector == '' { $selector: $s; }
        @else { $selector: $selector + ', ' + $s; }

    }

    @media #{unquote($selector)}{

        @content;

    }

}

А затем используйте его как таковое:

@include media( $extra-small-devices, $extra-large-devices ){

    ...

}

И вывод будет:

@media screen and (max-width: 600px), screen and (min-width: 1201px) {

    ...

}

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

@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