Question

我有以下SASS变量：

$mobile: "only screen and (max-width : 767px)";
$tablet: "only screen and (min-width : 768px) and (max-width : 1024px)";
$desktop: "only screen and (min-width : 1025px)";

我可以毫无问题地做到这一点：

@media #{$mobile} {

   /* my styles for mobile displays */

}

但是如何同时定位两个媒体查询？

这给我一个语法错误：

@media #{$mobile + "and" + $tablet} {

    /* my styles for mobile and tablet displays */

}

有人可以帮忙吗？

Answer 1

这不会给你CSS错误，但与你需要的稍有不同：

@media #{$mobile}, #{$tablet} {
   /* my styles for mobile and tablet displays */
}

来自MDN docs：

逗号分隔列表的行为类似于逻辑运算符或在使用时媒体查询。使用以逗号分隔的媒体查询列表时，如果任何媒体查询都返回true，样式或样式表都会返回应用。逗号分隔列表中的每个媒体查询都被视为单个查询，以及应用于一个媒体查询的任何运算符都不会影响他人。这意味着以逗号分隔的媒体查询可以定位不同的媒体功能，类型和状态。

事实是你用字符串插值制作的concat不是编译为有效的CSS。阅读有关媒体查询逻辑here的更多信息。

Answer 2

以上答案适用于or声明http://css-tricks.com/logic-in-media-queries/

如果您想将它们用作and，请执行以下操作。

$mobile: "(max-width : 767px)";
$tablet: "(min-width : 768px) and (max-width : 1024px)";
$desktop: "(min-width : 1025px)";

@media only screen and #{$mobile} and #{$tablet} {
   /* my styles for mobile and tablet displays */
}

输出

@media only screen and (max-width: 767px) and (min-width: 768px) and (max-width: 1024px) {
  /* my styles for mobile and tablet displays */
}

示例：http://sassmeister.com/gist/3784cbe7eca84039ec75

如何使用SASS插值来定位两个媒体查询？

2 个答案: