我在一个相当大的项目中推出了我自己的bootstrap-sass定制。在我的git repo中，我有自己的application.scss文件，它反映了原始bootstrap.scss，删除了我不需要的内容，并添加了我自己的自定义变量，mixins和样式。
在保留DRY方法的同时，我无法理解正确的方法。我@import 'application/variables';之前或之后应该@import 'path/to/bootstrap/variables';吗？
这似乎是引导程序开发人员的首选方式，因为_variables.scss中声明的所有变量后跟!default标志，只有先前已声明变量才会执行操作。
这在哪里失败？举个例如这样的声明：
$brand-primary: $gray;
编译此SASS代码会发出undeclared variable错误，因为$gray是在引导程序_variables.scss中定义的，稍后会导入该$gray。如果我希望此功能正常运行，我必须在我的文件顶部重新声明application/_variables.scss，即使它没有从默认值更改。
这可能听起来不是什么大问题，但是在一定程度的复杂性下它会开始发生很多，而你的$padding-base-vertical: 8px;
来自于＃34;我定义自己变量的文件＆＃34 34; to＆＃34;我定义变量的文件，并复制其他一些引导程序，而不实际更改它＆＃34;。
为了克服之前方法的问题，我尝试在bootstrap之后导入我的变量。事实证明它既不能真正发挥作用，也会以微妙的方式打破它。看看这个例子：
$input-height-base看起来很无辜，对吧？事实上它会根据需要改变垂直填充。这怎么破？例如，它会破坏_variables.scss变量，稍后在bootstrap＆＃39; $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。作为一个副作用，这种问题很难调试（至少对我而言）。
＆＃34;解决方案＆＃34;？ Redeclare {{1}}和{{1}}中的所有其他因变量就像它们在引导程序中一样。是的，它与之后方法的解决方法相同。
那么，有没有干嘛的方法呢？我甚至无法将我的变量分成两部分，一部分用于设置之前，另一部分用于设置之后，因为我可以碰到一个能够解决这两个问题的变量。
第一种方法不那么难看，但它远非理想的解决方案。
答案 0 :(得分：0)
这个问题花了我一些时间来解决问题。这是我提出的解决方案。
为了使您的SASS代码保持模块化，请在两种类型的代码之间保持明显的分离 - 声明性和命令式。声明性代码我指的是变量，函数和mixin的定义。命令式代码我的意思是样式定义（在编译时实际产生一些输出的任何代码）。将这些类型的代码保存在单独的文件中。然后，您可以在包含声明性代码的文件之间透明地声明依赖项（@import s），因为多次包含声明性代码对输出没有影响。
使用上面列出的方法，拆分您自定义的Bootstrap＆＃34;分成两个文件 - bootstrap-declarations和bootstrap-styles（我实际上将它分成更多文件以保持变量与函数/ mixin分开）。然后@import bootstrap-declarations来自您的应用variables，@import没有任何麻烦，并根据需要在@import之前和之后声明您的变量。在您的应用程序的命令式代码（样式）中，variables您的应用程序@import是bootstrap-styles {{1}} {{1}}之前的第一件事，而您和＆＃1}} ＃39;全部设定。