对于Sass，如何为CSS文件命名空间，以免与其他CSS框架冲突？

Question

Sass团队似乎已在Sass 3.4中删除了此功能，但是我试图对语义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。

几年前找到了一些文档，但我认为它们太旧了，有些变化了。

Answer 1

用一个下划线命名您的内部文件，并以scss结尾。是的，即使它是纯CSS，也就是语义.min.css→_semantic.min.scss

具有如下所示的外部文件：

getResponse(query, 
    (reader, objectMapper) -> objectMapper.readValue(reader, <class>);

长话短说，接下来的语法：

导入（包括）原始CSS文件 语法末尾没有#main .content { // if that's, where you want them to rule only @import 'semantic.min'; } 扩展名（导致部分s [ac] ss | css的实际读取，并将其内联到SCSS / SASS中）：

.css

以传统方式导入CSS文件 语法以传统方式进行，在结尾处带有.css扩展名（在编译的CSS中导致@import url（“ semantic.min.css”）;）：

@import "semantic.min";

这太好了：这种语法简洁明了，而且向后兼容！它与libsass和node-sass完美结合。