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问题的一些修复，例如：

使用import代替include - @import "full/path/to/file.css"
在文件末尾使用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

您无法在css文件中加入scss个文件。

partials中有一个名为 scss 的概念。这是模块化您的CSS并帮助您更轻松维护的好方法。

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

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

Scss partials与 @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;
}

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

2 个答案: