3

我有以下 SCSS 文件结构： suppliers.scss: 包括_base.scss,_sortable-table.scss和: 包括_product.scss _sortable-table.scss_product.scss_base.scss

_base.scss包含许多定义布局的变量，例如调制和列间大小。此外，它还包含由其他人扩展的基本布局类。

问题是，由于部分和每种样式都需要此基本导入，因此其内容会在结果 css 文件中重复多次。这会导致 css 的开销很大。

所以问题是如何防止这种重复。有什么猜测吗？

在https://github.com/coletivoEITA/noosfero-ecosol/tree/distribution-plugin/plugins/suppliers/public/stylesheets查看实际来源

4

1 回答 1

3

你应该仔细看看 import-directives、extends 和 mixins，然后重构你的代码。您可能想从“超级文件”（app.scss）开始。该文件基本上只是按照您需要的顺序导入所有创建的文件。

这可能是 app.scss 的典型内容：

@import "settings";

@import "mixins";
@import "extends";
@import "browser-reset";

@import "styles";
@import "more-styles"
@import "even-more-styles"
@import "..."
  1. 我做的第一件事是导入我所有的设置/变量。
  2. 之后，我正在导入可能已经依赖于某些变量的 mixins。
  3. 现在我正在导入我的扩展，它现在可以使用变量和混合。
  4. 浏览器重置文件
  5. 我的 App-Styles 可以利用我迄今为止所做的所有设置、mixin 和扩展。

确保除 app.scss 之外的所有其他文件都带有下划线（例如 _settings.scss），否则它们将被创建为单独的 css 文件，并且当您在其中使用变量、mixin 或扩展时当然会抛出错误。

如果你像这样组织你的代码，并在有意义的时候开始使用 mixins 和扩展，那么你就不必再担心臃肿的代码了。

于 2013-09-08T10:09:57.247 回答