在 SASS 中是不是可以从另一个文件中的类继承？

Posted 2023-02-23

【中文标题】在 SASS 中是不是可以从另一个文件中的类继承？

【英文标题】：Is it possible in SASS to inherit from a class in another file?在 SASS 中是否可以从另一个文件中的类继承？

【发布时间】：2012-08-01 00:09:51

【问题描述】：

这个问题几乎说明了一切。

例如，如果我使用Twitter Bootstrap，我可以在我自己的 SASS 样式表中定义继承自 Bootstrap 的 CSS 类的类吗？还是 SASS 中的继承仅适用于单个文件的范围内？

【参考方案1】：

据我所知，you have to use @import 的文件包含您要在 SASS 文件中使用的类，以便在该文件中使用它们。但是，我不是 SASS/SCSS 专家，所以有人可能知道另一种我不知道的远程使用它们的方法。

【参考方案2】：

**我可能弄错了，但如果我得到你想要做的事情，你不能在你想要扩展的元素内使用@extend .classname; 命令吗？当然，您应该只修改自己的代码以保持可更新性。

【参考方案3】：

是的！有可能。

如果您希望所有<button> 元素从Twitter Bootstrap's Default buttons 继承.btn 类

在您的styles.scss 文件中，您必须首先导入_bootstrap.scss：

@import "_bootstrap.scss";

然后在下面导入：

button  @extend .btn; 

【讨论】：

我觉得这样做很糟糕，因为其他答案几乎回答了这个问题（我只是忽略了一段时间然后忘记了）；但我接受你的回答，因为它是最完整的——也就是说，它引导我完成了整个过程。谢谢！

这仅适用于其他 SCSS 文件吗？你不能用 CSS 文件做这个吗？

在将@extend 与引导程序/任何框架一起使用时要小心，因为它可能无法按预期工作。如本文所述，需要注意一些事项：***.com/questions/30744625/…

但是，如果您在项目的多个文件中这样做，这不会复制 bootstrap.scss 中的 CSS 吗？

这会将整个bootstrap.css 导入styles.css 还是仅导入.btn？我的意思是在输出包中？如果它导入整个bootstrap.css，它将不必要地增加styles.css的大小。

【参考方案4】：

正如公认的答案表明@import 可以做到这一点，但是@import 一直是deprecated by sass

Sass 团队不鼓励继续使用 @import 规则。 Sass 将在未来几年逐步淘汰它，并最终将其从语言中完全删除。更喜欢@use 规则。

@use 规则更适合现在使用，因为它不会污染导入（用户）模块的范围。不幸的是，在撰写本文时，使用规则仅在 Dart sass 中实现。

【讨论】：

theres 一个 dart sass 编译器可以使用 @use 编译 sass 就好了。但是您必须在设置中指定要编译的文件，否则所有文件都将被编译，即使您想将它们合并到一个文件中并且只编译那个文件。