sass - Foundation/sass：媒体查询的外部样式表复制样式

Question

我想使用基础的 sass 版本。

但是，我也想为不同的屏幕宽度使用外部样式表。

如果在我的主 sass 文件中，我在媒体查询中导入样式表，则导入的文件无权访问基础 mixins。

但是，如果我将 mixins 导入到导入的 sass 文件中，那么生成的 css 文件会复制大量的基础样式。

如何在不复制代码的情况下导入可以访问基础 mixin 的外部 sass 文件？

Answer 1

我喜欢在底部引用我的外部样式表foundation.scss：

// Custom Styles
@import
  "foundation/custom/small-layout",
  "foundation/custom/medium-layout",
  "foundation/custom/large-layout";

请注意，如果您这样做，导入的工作表需要位于foundation文件夹中的某个位置。

您导入的样式表将继承之前导入的所有 Sass 好东西，包括来自_variables.scss. 然后，在每个特定于断点的样式表中，只需使用适当的变量将整个内容包装在媒体查询中：

@media #{$medium} {
  // styles
}

希望这可以帮助。