为 Bootstrap 4 制作深色主题输入答案

【问题标题】：Making dark themed inputs for Bootstrap 4为 Bootstrap 4 制作深色主题输入
【发布时间】：2018-08-02 14:12:03
【问题描述】：

TL;DR - 如何使用 SASS mixin 嵌套验证状态？

加长版 -

我在使用 Bootstrap 4 的 SASS 生成深色主题时遇到了一些困难。一些变量替换是显而易见的，但其他变量会导致问题。我目前坚持的是表单输入。默认情况下，Bootstrap 的 SASS 会输出白色背景输入。我用我收集的一个变量覆盖了这个背景，并将边框设置为正文文本颜色的 50%（它仍然有对比度，但不是很鲜明）。

在编译时（这是一个交给后端的动态过程），编译引擎“无法”知道主题是暗还是不暗，所以我把它留给设计师添加应具有深色主题（通常但不一定是主体）的容器的“content-dark”类。

到目前为止一切顺利！然后我突然想到，焦点看起来很有趣，因为我更具体的规则是在 SASS 计算的颜色之上强制执行我的新边框颜色。包括整个“焦点”混合不起作用，因为它再次将背景恢复为白色。我找到完成工作的单个“位”并将其移动到我的新嵌套规则中。

但是，用于验证的 mixin 要复杂得多，所以我愿意尝试完整的 mixin... 的想法（不幸的是有点令人费解）让它做它的事情然后调整我的背景颜色再次变得更加具体（耶特异性战争）。但是，我对 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);
    }
}

输入背景正确地是深色，边框通常正确地是对比色（但不是粗体），焦点正确地是明亮的蓝色。但是验证状态不起作用。它们仍然没有嵌套，这意味着即使“发光”是边框也不会更新。

我正在寻找具有深色主题验证状态的最佳方式（需要嵌套；单独编译可以解决问题，但我没有该选项）。

【问题讨论】：

重申一下：我意识到如果原始轮廓覆盖和背景由于嵌套而没有更具体，则可以避免所有事情。破坏事物的是更高的特异性。

标签： twitter-bootstrap sass

【解决方案1】：

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

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

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

这很冒险，因为 $nav-background 不必是深色（当是深色主题时）或浅色（当是浅色主题时），所以我需要更新我收集的信息（称为“输入边框”和“输入背景”是显而易见的选择）。这样做的好处是不需要嵌套，但缺点是在我的主题界面中暴露了更多选项（想法是使其流线化）。

[更新]

因此，在不得不大量整理大量答案之后，我最终将这两件事参数化。现在，在这种状态下，Bootstrap 可以很好地使用它，而且我的自定义页面表单上还有 2 个字段。乐叹息。

【讨论】：