我正在根据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,
有人知道如何解决吗?
答案 0 :(得分: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) {
...
}