将媒体查询从LESS转换为SCSS

Question

我正在尝试将一些旧的LESS样式表更新为SCSS，但遇到了翻译媒体查询的问题。

LESS变量如下：

@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;
      }
    }

我已将其翻译成以下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 Loader FWIW进行编译。代码编译（没有错误），但实际查询似乎没有工作。谢谢！

Answer 1

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

$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;
    }
}