如何在媒体查询中使用动态变量？

Question

我有以下几个变量，我想在媒体查询中使用它，我试图使用＃{viewport- $ type}但是没有幸运，sass编译器不会编译我的语法并说“unclosed括号in媒体查询表达“。那么，我该怎么做呢？任何人都可以帮忙吗？感谢。

$viewport-large: "max-width: 1441px";
$viewport-midium: "max-width: 1281px";
$viewport-small: "max-width: 1025px";

$type: midium;

@media (#{viewport-$type}) {
    // ...
}

Answer 1

我认为你不能在Sass中的媒体查询中动态引用变量。但是对于这样的事情，您可以使用Sass maps和map-get function。

$viewport:(
  large: "max-width: 1441px",
  medium: "max-width: 1281px",
  small: "max-width: 1025px");

$type: medium;

@media (map-get($viewport, $type)) { /* map-get - param 1 is the map, param 2 is the key */
  #demo {
    color: red;
  }
}

这是reference thread from Sass GitHub page。