Question

我试图通过控制旋转木马为渲染的SVG图标获取不同的颜色。

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

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

这使得箭头按照我的意图变绿。但是现在我有一张主背景颜色的卡片，我希望箭头在这个特殊的div中有一个白色。因为你可以想象，$ primary背景上的$ 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 -->

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

干杯。

Bootstrap v4.1

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

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

Bootstrap 4轮播控制颜色条件颜色 - SVG

1 个答案: