如何根据 Bootstrap SASS 中的背景动态设置文本颜色？答案

【问题标题】：How to dynamically set text color according to background in Bootstrap SASS?如何根据 Bootstrap SASS 中的背景动态设置文本颜色？
【发布时间】：2018-03-14 23:16:47
【问题描述】：

我有一个问题对我们所有使用 Bootstrap 4 sass 的人来说都很有趣。根据 BS 文档，当父块具有类 .bg-dark （例如）时，我们应该将 .text-light 类添加到 HTML 以完成所有工作。我是 sass 编码的新手，所以我想问一下 - 是否可以在 sass 文件中动态地执行它以获得类似的依赖：

如果块有类 .bg-success、.bg-dark、.bg-primary 里面的文本自动设置为 .text-light 而不在 HTML 中添加类？

【问题讨论】：

标签： twitter-bootstrap sass beautifulsoup bootstrap-4

【解决方案1】：

您可以遍历theme-colors()，测试亮度/色调，然后根据需要扩展text-light...

@each $color, $value in $theme-colors {
    @if ((lightness($value)) < 60 and (hue($value)) > 45) {
        .bg-#{$color} {
            @extend .text-light
        }
    }
}

Demo on Codeply

【讨论】：

【解决方案2】：

在您的自定义 SASS 文件中只需 extend .text-light 其他类中的类

.bg-success, .bg-dark, .bg-primary {
  @extend .text-light
}

注意：确保您已在自定义 SASS 文件中包含 Bootstrap SASS 文件。

【讨论】：

天哪，这么简单的解决方案！

【解决方案3】：

太棒了！我需要什么！您建议从亮度中获取文本颜色。但我有一个稍微不同的方法。我使用颜色的变体：

<code>$color-variants: ( 100: -10%,
200: -25%,
300: -50%,
400: -75%,
500: 100%,
600: 75%,
700: 50%,
800: 25%,
900: 15%);
//  Add color variants to $colors
@each $color-name,
$color in $colors {
    @each $variant-name,
    $percent in $color-variants {
        $mix-color: if($percent < 0%, white, black);
        $colors: map-merge($colors, ($color-name+'-'+$variant-name: mix($color, $mix-color, abs($percent))));
    }
}
}
</code>

在这种情况下，我该如何处理？例如，如果 .bg-******-300 文本应为 .text-dark，如果 .bg-*****-900 文本应该是 .text-light？

【讨论】：

请编辑并将其添加到问题中。不作为答案。