编译时移除 Mixin

Question

我一直在对此进行一些研究，但到目前为止还没有提出任何建议（也许这就是我的答案），但我想我会联系这里，看看是否有人可能知道任何事情关于这个。

我在一个项目中使用 Sass 作为我的样式表，我想知道是否有一种方法可以将所有内容编译两次：一次包含所有 mixin，第二次没有某个 mixin。在这种情况下，我很想省略的 mixin 是我编写的用于在某些断点处处理媒体查询的 mixin，我在整个样式表的各个点使用它来将所有相关样式捆绑在一起而不是单独的“响应式”样式表。但是，我有时想通过移除所有响应式样式来测试某些东西，因此希望将这些样式移除到一组中并将它们保留在另一组中，并能够根据需要来回切换。

例如，我可能会为页面标题设置一些样式，如下所示：

.h-page {
  font-size: 24px;
  @include breakpoint(tablet) {
    font-size: 21px;
  }
  @include breakpoint(phone) {
    font-size: 18px;
  }
}

这将输出以下内容：

.h-page {
  font-size: 24px;
  @media (max-width: 979px) {
    .h-page {
      font-size: 21px;
    }
  }
  @media (max-width: 480px) {
    .h-page {
      font-size: 18px;
    }
  }
}

但我希望能够在单独的样式表中再次编译所有内容以仅产生：

.h-page {
  font-size: 24px;
}

非常感谢任何有关这方面的指导。如上所述，我在我的研究中找不到任何关于这方面的内容，所以 Stack Overflow 是我最后的手段，看看是否有人可以提供一些关于这方面的见解。

Answer 1

一种选择是设置一个变量，例如$devmode: 'responsive'，可能在配置文件中。然后在您的breakpoint mixin（以及您想要切换的任何其他内容）中，执行以下操作：

@mixin breakpoint() {
  @if ($devmode == 'responsive') {
    // mixin
  }
}