scss 错误“预期媒体查询” - 使用多个媒体查询 - 标准化设备的大小

Question

我正在尝试根据 this 标准化我的 scss 上的设备尺寸：

/** 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)'

在此之后，少说我想创建一个目标是小型设备和中型设备的媒体查询：

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

但我在@media $small-devices, 行收到以下错误：

[scss] 媒体查询预期

环境：Visual Studio 代码、nodejs、angular 6、gulp、

有谁知道怎么解决这个问题？

Answer 1

您应该告诉 SASS，您的字符串应该不加引号并像常规 CSS 一样对待：

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

你仍然可以像这样使用多个：

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

但也许，为了风格和优雅，您可能需要考虑构建一个只接受所有字符串的 mixin，然后构建媒体查询：

@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) {

    ...

}