SASS 导入顺序错误答案

【问题标题】：SASS Importing In Wrong OrderSASS 导入顺序错误
【发布时间】：2016-08-26 04:20:40
【问题描述】：

我目前遇到了与 SASS 相关的问题。当使用@import 语句时，它似乎没有承认我在其他文件之前导入了某个文件，导致一些变量没有被声明。我正在尝试对 Bootstrap 进行一些简单的更改。文件夹结构如下：

我的app.scss是主入口，如下：

@import url('https://fonts.googleapis.com/css?family=Open+Sans|Droid+Sans+Mono|Droid+Serif'); //Basic fonts
@import "bower_components/bootstrap-sass/assets/stylesheets/bootstrap"; //Bootstrap
@import "bower_components/font-awesome/scss/font-awesome"; //Font Awesome

//Bootstrap style changes
@import "variables";

@import "components/alerts";
@import "components/buttons";
@import "components/dropdowns";
@import "components/forms";
@import "components/labels";
@import "components/navbars";
@import "components/pagination";
@import "components/panels";
@import "components/progress";

问题是，变量文件根本没有被导入，也没有在加载其他文件之前被导入。这是一件相当奇怪的事情，我似乎无法弄清楚。如果您能提供任何帮助，我将不胜感激:)

【问题讨论】：

“不起作用”没有描述问题。您没有显示您的预期结果，也没有显示您得到的结果。

标签： twitter-bootstrap sass

【解决方案1】：

如果你想覆盖默认的 Bootstrap 变量，你需要在实际的 Bootstrap 变量部分之前导入你的文件。这是因为他们所有的变量都有!default 标志。这意味着如果已经分配了一个变量，那么下次您尝试重新分配它时，它将忽略它（除非它首先没有分配变量）。

例如，假设在 bootstrap 的 _variables.scss partial 中有：

$brand-primary: #555555 !default;

...然后在您导入的下一个文件之后，您将其他内容分配给$brand-primary，它将被忽略 - 即使您再次指定!default 标志。

这就是为什么您需要在引导程序执行此操作之前覆盖变量。

例如

// custom-bootstap.scss contents:

// Core variables and mixins
@import "custom/bootstrap/variables"; // custom/overwritten variables
@import "bootstrap/variables";

@import "bootstrap/mixins";
...

在custom/bootstrap/variables内部：

`$brand-primary: #000000!default;`

【讨论】：

谢谢你，解决了它:)

【解决方案2】：

Bootstrap 变量使用 !default 标志声明，这意味着覆盖这些变量的文件必须在 Boostrap 文件之前导入。

!default 是做什么的？仅当变量之前未声明时，带有此标志的赋值才会生效。也就是说，您的覆盖文件确实更改了这些变量（除非您也使用!default 标志），但它这样做Boostrap 有机会实际使用变量。示例：

/*  bootstrap/scss/_variables.scss */
$alert-padding-y: .75rem !default;
$alert-padding-x: 1.25rem !default;

/*  bootstrap/scss/_alert.scss */
.alert {
  padding: $alert-padding-y $alert-padding-x; /* values are used */
}

/* your override */
$alert-padding-y: .5rem; /* values are changed, but a bit too late */
$alert-padding-x: 1rem;

【讨论】：