是否可以创建一个css文件作为预制件，但可以在其他css文件中使用？

Question

我可能错过了我正在寻找的答案，因为我已经用谷歌搜索了这个，但我一直看到它在 html 中使用。这是事实，但我主要将样式脚本保留在自己的文件中，以保持 html 更清晰、更具可读性。

我只是想将另一个css文件调用到一个css文件中，作为某种预制盒子的预制件，但我可能会让这个变得更加复杂。

或者用输入的样式创建一个 html 来创建所述预制件，然后将整个文件引用到我可能需要的地方会更容易吗？

真的只是想让我的项目更小，并尽可能少地重复代码，如果这有意义的话。

我只是在寻找工作效率并在谷歌上搜索这个，我可能错过了我正在寻找的东西，但没有什么真正突出来回答我的问题

Answer 1

这里有不同的技术，您可以根据情况和喜好使用。请注意，工具的选择始终是针对具体情况的，并且可以基于意见。

第一个明显的选择是链接多个样式表：

<link rel="stylesheet" href="stylesheet-1.css">
<link rel="stylesheet" href="stylesheet-1.css">

这样，如果声明了冲突的规则，最后一个样式表将覆盖前一个样式表。然而，只有当特异性权重保持不变时，这才成立。

因此，我强烈建议您阅读MDN WebDocs - 特异性。

2 使用

@import

您可以在 CSS 中使用

@import

，例如：

@import URL("link-to-url.css");

这允许您导入其他文件并创建模块化* CSS，您可以在其中加载您想要使用的所有模块。这是一种帮助公司创建框架的技术，您可以在其中将 CSS 与您需要使用的不同模块“打包”。

缺点是，如果模块失败，将不会有默认的回退，因此您依赖于这些“模块”的正确工作和加载。

与步骤 2 相同，您可以使用

@import

规则加载特定的

.scss

文件，您不需要调用 URL，而是需要调用要导入的文件名。这里的主要区别是，引擎将从所有导入的 SASS/LESS 文件编译一个完整的 CSS 文件。