SASS导入错误的顺序

Question

我目前遇到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";

问题是，变量文件根本没有被导入，或者在加载其他文件之前。这是一个相当奇怪的事情，我似乎无法弄清楚。我很感激您提供的任何帮助：）

Answer 1

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

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

$brand-primary: #555555 !default;

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

这就是你需要在 bootstrap之前覆盖变量的原因。

e.g。

// 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;`

Answer 2

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

!default的作用是什么？仅当之前未声明变量时，带有此标志的分配才生效。也就是说，您的替代文件确实会更改这些变量（除非您也使用!default标志），但是在Boost 之后实际消费变量。示例：

/*  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;