Sass 将媒体查询从LESS转换为SCSS

我试图将一些旧的少样式表更新到SCS中，但在翻译媒体查询时遇到了一个问题

较少的变量如下所示：

@lg: ~"(min-width: 1201px)";
@md: ~"(min-width: 993px)";
@sm: ~"(min-width: 769px)";
@xs: ~"(max-width: 768px)";

$lg: "(min-width: 1201px)";

.modal-dialog {
    margin: 100px auto;

    @media #{$lg} {
        width: 880px;
    }
}

并以这种方式引用：

.modal-dialog {
      margin: 100px auto;
      @media @md {
        width: 880px;
      }
    }

我已将其转换为以下SCSS变量：

$lg: "#{min-width: 1201px}";
$md: "#{min-width: 993px}";
$sm: "#{min-width: 769px}";
$xs: "#{max-width: 768px}";

以及以下用法：

.modal-dialog {
  margin: 100px auto;
  @media ($md) {
    width: 880px;
  }
}

---

所讨论的代码属于.Vue组件，正在使用SASS加载程序FWIW进行编译。代码可以编译（没有错误），但实际的查询似乎不起作用。谢谢

在SCSS/SASS中，建议将完整媒体查询存储为变量的方法如下：

@lg: ~"(min-width: 1201px)";
@md: ~"(min-width: 993px)";
@sm: ~"(min-width: 769px)";
@xs: ~"(max-width: 768px)";

$lg: "(min-width: 1201px)";

.modal-dialog {
    margin: 100px auto;

    @media #{$lg} {
        width: 880px;
    }
}

编译成

.modal-dialog {
    margin: 100px auto;
}

@media (min-width: 1201px) {
    .modal-dialog {
        width: 880px;
    }
}

---

您能提供从SCSS生成的CSS文件吗？