twitter-bootstrap-3 - bootstrap-sass : should I import custom variables before or after _variables. scss 中的 DRY 方法？

Question

我正在一个相当大的项目中推出我自己的 bootstrap-sass 定制。在我的 git 存储库中，我有自己的 application.scss镜像原始 bootstrap.scss 的文件，删除我不需要的内容并添加我自己的自定义变量、mixin 和样式。

在保留 DRY 方法的同时，我无法理解正确的方法。我应该@import 'application/variables';在我之前或之后@import 'path/to/bootstrap/variables'; ?

之前的方法

这似乎是引导开发人员的首选方式，因为在 _variables.scss 中声明的所有变量后面是 !default标志，仅当变量先前已声明时才采取行动。

这在哪里失败？以这样的声明为例:

$brand-primary: $gray;

编译此 SASS 代码将输出 undeclared variable错误，因为 $gray在 Bootstrap 的 _variables.scss 中定义，稍后导入。如果我想让它工作，我将不得不重新声明 $gray在我的文件顶部，即使它没有从默认值更改。

这听起来可能没什么大不了的，但是在一定程度的复杂性上，它开始发生很多，你的 application/_variables.scss从“我定义自己的变量的文件”变为“我定义变量并复制其他一些 Bootstrap 内容而不实际更改它的文件”。

后进法

为了克服之前方法的问题，我尝试在 Bootstrap 的变量之后导入我的变量。事实证明它也不起作用，而且它以更微妙的方式被破坏了。看这个例子:

$padding-base-vertical: 8px;

看起来很无辜，对吧？事实上，它会根据需要更改垂直填充。这怎么破？例如，它会破坏 $input-height-base变量，稍后在 Bootstrap 的 _variables.scss 中声明, 根据 $padding-base-vertical 未正确重新计算的变化。

这就是 $input-height-base被定义为:

$input-height-base: ($line-height-computed + ($padding-base-vertical * 2) + 2) !default;

因此 $input-height-base用 $padding-base-vertical 计算的默认值，然后再也不会。作为副作用，这种问题很难调试(至少对我来说是这样)。

解决方案”？重新声明 $input-height-base和 application/_variables.scss 中的所有其他因变量就像他们在 Bootstrap 中一样。是的，这与 after 方法的解决方法相同。

那么，有没有一种干燥的方法来做到这一点？我什至不能将我的变量一分为二，一部分在之前设置，一部分在之后设置，因为我可能会碰到一个同时遇到这两个问题的变量。

第一种方法不那么丑陋，但远非理想的解决方案。

Answer 1

这个问题也花了我一些时间来解决。这是我想出的解决方案。

为了保持你的 SASS 代码模块化，请在两种类型的代码之间保持明显的分离——声明式和命令式。我所说的声明性代码是指变量、函数和 mixin 的定义。命令式代码是指样式定义(编译时实际会产生一些输出的任何代码)。将这些类型的代码保存在单独的文件中。然后，您可以透明地声明包含声明性代码的文件之间的依赖关系(@import s)，因为多次包含声明性代码对输出没有影响。

使用上述方法，将您的“自定义 Bootstrap ”拆分为两个文件 - bootstrap-declarations和 bootstrap-styles (我实际上将它拆分为更多文件，以使变量与函数/mixin 分开)。然后@import bootstrap-declarations来自您应用程序的 variables没有任何麻烦，并在 @import 之前和之后声明您的变量如所须。在应用程序的命令式代码(样式)中，@import您的应用程序的 variables作为第一件事，在 @import 之前的 bootstrap-styles ，一切就绪。