Bootstrap 4 引导4旋转控制颜色条件颜色-SVG

我正在尝试为用于控制旋转木马的渲染SVG图标获取不同的颜色

我更改了箭头的默认颜色，如下所示：

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

这使箭头变成了我想要的绿色。 但是现在我有一张带有主背景色的卡片，我希望箭头在这个特殊的div中有一个白色。因为你可以想象，$primary background上的$primary color不是真正可读的

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

.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 -->

同侧阴唇
...

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

干杯

---

Bootstrap v4.1

在测试了很多东西之后，我终于找到了一个有点“okish”的解决方案。就维修而言，这是可以接受的。不过，我们非常感谢您的建议

我现在正在使用一个mixin，它可以同时输出两个arrow类

@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);
}

---

一个缺点是因为它需要一个转义的#，所以我必须使用一个不带#的变量。它不像我想要的那么干。

我确实找到了一些有效的东西。但必须有一个更优雅的解决方案。用20个或更多不同的旋转木马和背景来维持这一点很可能是地狱(