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

102

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

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

css inheritance stylesheet sass

— 丹涛
source

180

是！这是可能的。

如果您希望所有<button>元素都继承自.btn该类 Twitter Bootstrap的Default按钮

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

@import "_bootstrap.scss";

然后在导入下面：

button { @extend .btn; }

— 奥古斯丁
source

我为这样做感到难过，因为其他答案几乎都回答了这个问题（我只是忽略了一段时间，然后忘记了）。但我接受您的回答，因为它是最完整的-即，它会引导我完成整个过程。谢谢！

— 丹涛

4

这仅适用于其他SCSS文件吗？您不能使用CSS文件执行此操作吗？

— 2015年

1

@extend与引导程序/任何框架一起使用时要小心，因为它可能无法按预期工作。有一些事情要注意在这篇文章中概述的：stackoverflow.com/questions/30744625/...

— 帕特里克Affentranger

2

但是，如果您在项目中的多个文件中执行此操作，这是否不复制bootstrap.scss中的CSS？

— fritzmg

1

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

— 特立独行

8

**我可能会弄错了，但是如果我明白了您要尝试做的事情，您难道不能只在@extend .classname;要扩展的元素内使用命令吗？自然，您应该只修改自己的代码以保留可更新性。

— 马克·恩斯特
source

2

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

— 斯科特
source

1

就像已接受的答案表明使用@import可以做到这一点一样，但是@import已被sass弃用。

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

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

— 埃哈卜
source