为Bootstrap 4制作暗色主题输入框

Question

简短版 - 我如何使用SASS mixin嵌套验证状态？

详细版 -

我正在使用Bootstrap 4的SASS生成深色主题时遇到了一些困难。有些变量替换很明显，但其他变量替换却出现了问题。我目前卡在表单输入上。Bootstrap的SASS默认会输出白色背景的输入框。我用收集到的变量覆盖此背景，并将边框设置为正文颜色的50%（仍然具有对比度，但不会太过鲜明）。

在编译时（这是一个动态过程，由后端处理），编译引擎“不能”知道主题是否应该是深色的或浅色的，因此我让设计师为应该采用深色主题的容器（通常是但不一定是正文）添加“content-dark”类。

到目前为止还不错！然后我发现焦点看起来很奇怪，因为我的更具体规则正在强制执行我的新边框颜色覆盖SASS计算出的颜色。包含整个“focus”mixin并不起作用，因为它会再次将背景恢复为白色。我找到了单个“bit”并将其移入我的新嵌套规则中。

然而，验证的mixin要复杂得多，因此我愿意尝试完整的mixin……使用（不幸的是有点复杂的）想法让它做自己的事情，然后再次调整我的背景颜色更加具体（yay specificity war）。但是，我的SASS知识有点薄弱，这并没有起作用：

.content-dark {
    select.form-control, .form-control {
        background-color: $nav-background;
        color: darken($body-color, 33%);
        border: 1px solid darken($body-color, 50%);
        &:focus {
            border-color: $input-focus-border-color;
        }
        @include form-validation-state("valid", $form-feedback-valid-color);
        @include form-validation-state("invalid", $form-feedback-invalid-color);
    }
}

输入框的背景颜色是正确的暗色，边框通常是对比但不粗体的颜色，聚焦时是正确的发光蓝色。但验证状态无法正常工作。它们仍然没有嵌套，这意味着即使“发光”也不会更新边框。

我正在寻找最佳方法来实现深色主题的验证状态（嵌套是必需的；单独编译可以解决问题，但我没有那个选项）。

- Greg Pettit

---

重申一下：我意识到，如果原始的大纲覆盖和背景不是由于嵌套而更加具体，那么所有这些都可以避免。正是更高的具体性导致了问题的出现。 - Greg Pettit

Answer 1

仍然对其他答案感兴趣，因为LIGHT主题最终看起来很糟糕（但至少它们能用），但在此期间我所做的是：

我完全放弃了嵌套的东西，因为我知道那是主要问题，并在我的_custom_variables.sass文件中声明了这两个变量：

$input-bg: $nav-background;
$input-border-color: darken($body-color, 50%);

这是一个棘手的问题，因为$nav-background不一定是暗色（在暗色主题下）或浅色（在浅色主题下），所以我需要更新我收集的信息（称为“输入边框”和“输入背景”是明显的选择）。这样做的好处是不需要嵌套，但缺点是在我的主题界面中公开了更多选项（想法是使其简化）。

[更新]

经过大量筛选回答后，我最终将这两个参数化。Bootstrap现在基本上可以很好地处理它，在那种状态下，我的自定义页面表单上有2个额外的字段。叹气。

- Greg Pettit