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

Question

我想使用sass版本的基础。

但是，我也希望将外部样式表用于不同的屏幕宽度。

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

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

如何在不复制代码的情况下导入可以访问基础mixins的外部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
}

希望这有帮助。