Question

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

长版 -

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

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

到目前为止一切顺利！然后我发现焦点看起来很有趣，因为我更具体的规则是在SASS计算的顶部颜色之上强制执行新的边框颜色。包括整个“焦点”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);
    }
}

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

我正在寻找具有黑暗主题验证状态的最佳方法（嵌套是必需的;单独的编译可以解决问题，但我没有这个选项）。

Answer 1

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

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

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

它有点冒险，因为$ nav-background不是暗（当一个黑暗的主题）或光（当一个轻的主题），所以我需要更新我收集的信息（某事调用＆＃34;输入边界＆＃34;和＆＃34;输入背景＆＃34;是显而易见的选择）。这样做的好处是不需要嵌套，但在我的主题界面中暴露更多选项的缺点（想法是简化它）。

[更新]

因此，在不得不大量策划大量答案之后，我最终将参数化了两件事。 Bootstrap现在可以很好地使用它，在那个状态下，我的自定义页面表单上还有2个字段。 Le叹了口气。

为Bootstrap 4制作黑暗主题输入

1 个答案: