如何使用SASS插值针对两个媒体查询？

我有以下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 */

}

---

有人能帮忙吗？

这不会给您带来CSS错误，但与您需要的略有不同：

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

来自MDN文档：

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

问题是，用字符串插值生成的concat不是

---

编译为有效的CSS。了解有关媒体查询逻辑的更多信息

这不会给您带来CSS错误，但与您需要的略有不同：

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

来自MDN文档：

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

问题是，用字符串插值生成的concat不是

---

编译为有效的CSS。了解有关媒体查询逻辑的更多信息

以上答案作为

或
语句使用

如果要将它们用作
和
，请执行以下操作

$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 */
}

例如：
上面的答案作为
或
语句使用

如果要将它们用作
和
，请执行以下操作

$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 */
}

例如：
今后，请避免回答重复的问题。插值是一个特定于Sass的构造（注意标签上写着“Sass”）。我认为@Drops回答这个问题很好，因为它与您上面发布的“重复问题”完全不同。再次感谢。@cimmanon我回答这个问题的主要原因是Tintin的代表，也许dude需要尽快回答，并且无法从重复的示例中推断出解决方案。如果可能的话，我不介意整个问题被删除。但mos def将在未来的回答中牢记这一点。Cheers@Drops你回答以上的工作是作为一个或声明（手机或平板电脑）。@肉桂：我不明白你的意思。如果其他人的“无能”让你如此烦恼，你为什么还要花时间在这个黑板上？顺便说一句，请不要犹豫删除我的
重复问题
。以后请避免回答重复问题。插值是一个特定于Sass的构造（注意标签上写着“Sass”）。我认为@Drops回答这个问题很好，因为它与您上面发布的“重复问题”完全不同。再次感谢。@cimmanon我回答这个问题的主要原因是Tintin的代表，也许dude需要尽快回答，并且无法从重复的示例中推断出解决方案。如果可能的话，我不介意整个问题被删除。但mos def将在未来的回答中牢记这一点。Cheers@Drops你回答以上的工作是作为一个或声明（手机或平板电脑）。@肉桂：我不明白你的意思。如果其他人的“无能”让你如此烦恼，你为什么还要花时间在这个黑板上？顺便说一句，不要犹豫删除我的
重复问题。
…但这是有效的and或。
克里斯，CSS技巧：这太好了，非常感谢<代码>…但这是有效的和或。
克里斯，CSS技巧：这很好，非常感谢！