导入基本部分 scss 时避免复制 [重复]

Posted 2023-03-06

【中文标题】导入基本部分 scss 时避免复制 [重复]

【英文标题】：Avoid replication when importing a base partial scss [duplicate]

【发布时间】：2013-09-11 12:14:30

【问题描述】：

我的 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查看实际来源

【参考方案1】：

您应该仔细查看 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 "..."

我要做的第一件事是导入我的所有设置/变量。 之后，我将导入可能已经依赖于某些变量的 mixin。 现在我正在导入我的扩展，它现在可以使用变量和 mixins。 浏览器重置文件 我的 App-Styles 可以使用我目前所做的所有设置、mixins 和扩展。

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

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

【讨论】：

要做的事情是：(1) 将变量和仅变量放在部分中，(2) 使用 mixins 而不是 @extend .class

(1) 您应该尽可能使用变量，是的，并且尽可能少地使用它们。 (2) 不太对。 Mixins 总是在生成新代码。扩展正在使用当前选择器扩展已经定义的 css 类。您应该从 mixin 开始（例如 radius($radius) ）。如果您注意到您一遍又一遍地使用具有相同设置的这个 mixin，请在扩展文件中定义一个类并从现在开始使用它。

关于（1）：如果部分除了变量之外还定义了类，那么就会发生重复