Question

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

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

Answer 1

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

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

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

Answer 2

您可以遍历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

Answer 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？

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

3 个答案: