Css SASS淡出了需要关注的实际问题

我试图得到一个不同的div渐变颜色，从深到浅

我可以看到我的代码如何编辑较浅的颜色，但我不能看到较深的效果。我检查了代码，所有代码都正常工作。淡入淡出效果有效，但淡入淡出效果不起作用-至少是相同的。当我查看生成的css文件时，我注意到背景颜色与$color基值相同。为什么事实上的淡入淡出不被欣赏

SCSS：

HTML:

变暗4
变暗3
变暗2
变暗1
底色
减轻1
减轻2
减轻3
减轻4
变暗4
变暗3
变暗2
变暗1
底色
减轻1
减轻2
减轻3
减轻4
变暗4
变暗3
变暗2
变暗1
底色
减轻1
减轻2
减轻3
减轻4

函数

fade-in（）

的作用与

opacify（）

相同，并符合以下条件：

opacify（）

函数将alpha通道增加一个固定量

---

您的

$color base

值都是不透明的，因此

淡入（）

函数不适用，因为它们的alpha通道已经具有最大值。如果您尝试使用alpha值低于

1

的基色，您将看到您的代码工作正常。

请向我们展示您的

fade\u in

和

fade\u out

函数，您的代码是不完整的。使用SASS，您不需要函数来淡入和淡出颜色效果。有了这段代码，淡入淡出的颜色效果可以正常运行，但是淡入淡出的颜色效果是不对的。在文档中，我只能找到名为

fade-In

和

fade-out

的函数，因此我认为您的函数是自定义的。您不需要SASS嵌套函数来获得淡入淡出效果。可以对关键帧使用简单的css动画。您也不需要容器中的20行HTML。@lortschi显然我知道，但我需要用SASS来完成。无论如何谢谢是的，这就是我没有看任何变化的原因。谢谢

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

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