Bootstrap 4 carousel-control-color 条件颜色 - SVG答案

【问题标题】：Bootstrap 4 carousel-control-color conditional colors - SVGBootstrap 4 carousel-control-color 条件颜色 - SVG
【发布时间】：2018-10-23 06:56:33
【问题描述】：

我试图为渲染的 SVG 图标使用不同的颜色来控制轮播。

我将箭头的默认颜色更改如下：

$carousel-control-color:            $secondary !default;

这使箭头按我的意图变为绿色。但是现在我有一张具有主要背景颜色的卡片，并且我希望箭头在这个特定的 div 内具有白色。因为您可以想象，$primary 背景上的 $primary 颜色并不是真正可读的。

我尝试使用条件逻辑来设置变量的值，但它并没有像我想象的那样覆盖该值。

.widget {
    &.widget-support-slider {
        .carousel-control-prev-icon,
        .carousel-control-next-icon {
            @if $carousel-control-color == $primary{
                    $carousel-control-color: white;
                    color: $carousel-control-color;
                }

        }
    }
}

对应的 HTML

<div class="card widget-card bg-primary text-light widget-support-slider mt-3">
<div class="card-header py-2">
    <span class="text-primary">Lorem</span> ipsum dolor sit
    <div class="carousel-controls">
    <a class="carousel-control-prev" href="#support-slider" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Vor</span>
    </a>
    <a class="carousel-control-next" href="#support-slider" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Zurück</span>
    </a>
    </div>
</div>
<div class="card-body p-0">
    ...
</div><!-- /.card-body -->

我也尝试过更改颜色或填充属性，但这些都不会更改箭头颜色。 bootstrap sass 中是否有我忽略的内置函数？

干杯。

引导 v4.1

【问题讨论】：

我实际上发现了一些有用的东西here。但必须有一个更优雅的解决方案。用 20 个或更多不同的轮播和背景来维持这个可能是地狱。 :(

标签： bootstrap-4

【解决方案1】：

在测试了很多东西之后，我终于找到了一个对我来说有点“不错”的解决方案。关于维护它可以接受。建议虽然受到高度赞赏。

我现在正在使用一个 mixin，它会吐出两个箭头类。

@mixin carousel-control-fill($color) {
    .carousel-control-prev-icon {
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23#{$color}' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
    }

    .carousel-control-next-icon {
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23#{$color}' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");
    }
}

// setting a color variable without the #
$carousel-control-color-inverse: fff;

&.widget-support-slider {
    // using it
    @include carousel-control-fill($carousel-control-color-inverse);
}

一个缺点是因为它需要一个转义的#，我必须使用一个没有# 的变量。这不像我想要的那样干燥。

【讨论】：