对于 Sass 如何命名 css 文件以免与其他 css 框架冲突？答案

【问题标题】：For Sass How can I namespace a css file so as not to conflict with other css frameworks?对于 Sass 如何命名 css 文件以免与其他 css 框架冲突？
【发布时间】：2018-08-23 15:41:58
【问题描述】：

Sass 团队似乎已在 Sass 3.4 中删除了此功能，但我试图为 Semantic UI CSS 库命名，以免与其他库发生冲突而使其无法正常工作。

.semantic-namespace {
@import "semantic-ui-css/semantic.min.css";
}

我得到了这个错误

error sass/semantic-namespace.scss (Line 3: CSS import directives may only be used at the root of a document.)

似乎是说我只能在顶部使用@import。

找到了几年前的一些文档，但我认为它们太旧了，有些地方已经改变了。

【问题讨论】：

标签： css sass compass-sass compass

【解决方案1】：

使用下划线命名您的内部文件，并以 scss 结尾。 .是的，即使它是普通的css，即semantic.min.css → _semantic.min.scss

有一个像这样的外部文件：

#main .content {  // if that's, where you want them to rule only
    @import 'semantic.min';
}

长话短说，语法如下：

导入（包含）原始 CSS 文件语法末尾没有 .css 扩展名（导致实际读取部分 s[ac]ss|css 并将其包含在 SCSS/SASS 中）：

@import "semantic.min";

以传统方式导入 CSS 文件语法采用传统方式，最后带有 .css 扩展名（结果为 @import url("semantic.min.css"); 在您编译的 CSS 中）：

@import "semantic.min.css";

而且非常棒：这种语法优雅简洁，而且向后兼容！它与 libsass 和 node-sass 完美配合。

【讨论】：

您在哪里使用下划线名称？如果您仍在 {} 中使用 import，您是如何克服错误的？