SASSfade_in效果问题要看

Question

我正在尝试获得具有渐变颜色的不同 div，从深到浅。

我可以看到我的代码如何编辑更亮的颜色，但我看不到更暗的效果。我检查了代码，一切正常。 fade_out 效果有效，但 fade_in 效果无效 - 它们是相同的。当我查看生成的 css 文件时，我发现背景颜色与 $color-base 值相同。为什么fade_in效果不升值？

SCSS:

    @if $k==1 {
        $color-base: red;
    }
    @else if $k==2 {
        $color-base: blue;
    }
    @else {
        $color-base: green;
    }
    .container-#{$k} {
        .base-color {
            background-color: $color-base;
        }
        @for $i from 4 through 1 {
            .darken-#{$i} {
                background-color: fade_in($color-base, 0.2 * $i);
                .color-box-text {
                    color: red;
                }
            }
            .lighten-#{$i} {
                background-color: fade_out($color-base, 0.2 * $i);
                .color-box-text {
                    color: black;
                }
            }
        }
    }
}

HTML:

    <div class="box darken-4"><span class="color-box-text">Darken 4</span></div>
    <div class="box darken-3"><span class="color-box-text">Darken 3</span></div>
    <div class="box darken-2"><span class="color-box-text">Darken 2</span></div>
    <div class="box darken-1"><span class="color-box-text">Darken 1</span></div>
    <div class="box base-color"><span class="color-box-text">Base color</span></div>
    <div class="box lighten-1"><span class="color-box-text">Lighten 1</span></div>
    <div class="box lighten-2"><span class="color-box-text">Lighten 2</span></div>
    <div class="box lighten-3"><span class="color-box-text">Lighten 3</span></div>
    <div class="box lighten-4"><span class="color-box-text">Lighten 4</span></div>
</div>
<div class="mycontainer container-2">
    <div class="box darken-4"><span class="color-box-text">Darken 4</span></div>
    <div class="box darken-3"><span class="color-box-text">Darken 3</span></div>
    <div class="box darken-2"><span class="color-box-text">Darken 2</span></div>
    <div class="box darken-1"><span class="color-box-text">Darken 1</span></div>
    <div class="box base-color"><span class="color-box-text">Base color</span></div>
    <div class="box lighten-1"><span class="color-box-text">Lighten 1</span></div>
    <div class="box lighten-2"><span class="color-box-text">Lighten 2</span></div>
    <div class="box lighten-3"><span class="color-box-text">Lighten 3</span></div>
    <div class="box lighten-4"><span class="color-box-text">Lighten 4</span></div>
</div>
<div class="mycontainer container-3">
    <div class="box darken-4"><span class="color-box-text">Darken 4</span></div>
    <div class="box darken-3"><span class="color-box-text">Darken 3</span></div>
    <div class="box darken-2"><span class="color-box-text">Darken 2</span></div>
    <div class="box darken-1"><span class="color-box-text">Darken 1</span></div>
    <div class="box base-color"><span class="color-box-text">Base color</span></div>
    <div class="box lighten-1"><span class="color-box-text">Lighten 1</span></div>
    <div class="box lighten-2"><span class="color-box-text">Lighten 2</span></div>
    <div class="box lighten-3"><span class="color-box-text">Lighten 3</span></div>
    <div class="box lighten-4"><span class="color-box-text">Lighten 4</span></div>
</div>

Answer 1

函数 fade-in() 的作用与 opacify() 相同，并且根据 documentation:

The opacify() function increases the alpha channel by a fixed amount.

您的 $color-base 值都是不透明的，因此 fade-in() 函数不适用，因为它们的 alpha 通道已经具有最大值。如果您尝试使用 alpha 值低于 1 的基色，您会发现您的代码工作正常。

SASSfade_in效果问题要看

SASS fade_in effect problems to watch

css

sass

fade