如何在 .scss 文件中包含外部 CSS 文件作为类的规则？

Question

我只想对页面的特定部分使用bootstrap-3.3.7.min.css 规则。因此，我下载了它，创建了一个名为 bootstrap.scss 的新文件，并尝试将这条规则添加到其中。我在我的网站上使用 django，所以我安装了 sass 并将预编译器规则添加到我的设置中。

在我的bootstrap.scss 文件中，我添加了这条规则来影响所有bs3 类：

.bs3 {
  @include bootstrap-3.3.7.min.css;
}

bootstrap-3.3.7.min.css 与bootstrap.scss 在同一目录中，所以我不确定是否还需要指定完整路径。

在我的模板中：

<link href="{% static "css/bootstrap.scss" %}" rel="stylesheet" type="text/css" />

<input id="example" type="submit" class="bs3 delBtn" value=" " rel='popover' data-placement='right' data-content='Some message'/>

我们的想法是让 .scss 文件规则仅适用于具有 bs3 类的元素。正如您所猜测的那样，这是行不通的。我看不到该课程的任何变化。但是如果我将body{background-color: red;} 添加到 bootstrap.scss，我可以看到这种变化，所以我知道 scss 文件正在加载。

我尝试了一些其他 stackoverflow 问题的修复，例如：

1. 使用import 代替include - @import "full/path/to/file.css"
2. 在文件末尾使用import 而不使用.css

这些都不起作用。我是 SASS 世界的新手，我可能在这里犯了一些愚蠢的错误。如果您能指出它们，那将非常有帮助。谢谢！

Answer 1

如果您导入所有 sass 部分并将它们包装在某种类型的命名空间类中，它应该可以工作：

.b3 {
    @import "/bootstrap-3.3.7-folder/_buttons.scss";
    @import "/bootstrap-3.3.7-folder/_grid.scss";
    @import "/bootstrap-3.3.7-folder/_somefile.scss";
    @import "/bootstrap-3.3.7-folder/_somefile.scss";
    @import "/bootstrap-3.3.7-folder/_etc.scss";
}

这将输出你所有用 .bs3 {} 包裹的 bs-3.3.7 样式

.bs3 .btn {}
.bs3 .row {}
/* etc */

然后包装这些元素

<div class="b3">
    <!-- all your 3.3.7 specific styles here -->
    <button class="btn">Click Me</button>
</div>

Answer 2

您不能在scss 文件中包含css 文件。

scss 中有一个叫做 partials 的概念。这是模块化您的 CSS 并有助于使事情更易于维护的好方法。

partial 只是一个以下划线开头的 Scss 文件。您可以将其命名为 _partial.scss。

下划线让 Sass 知道该文件只是部分文件，不应将其生成为 CSS 文件。

Scss 部分与 @import 指令一起使用，导入时无需指定文件扩展名。

要在另一个 scss 文件中包含一个 scss 文件，请尝试以下代码并查看代码中的注释。

例子，

 /*`_variable.scss` partial file*/

 $greencolor: green;
 $orangecolor: orange;


/*`_style.sass` partial file*/

@import 'variable';    /*here `variable` is the file name, if it is inside a folder named `variable`, then it should be `@import 'variable/variable'`*/

body{
   background-color:$orangecolor;
}