CODEWITHSUNDEEP
csssassfade
Sones1
Sones1

Reputation: 133

SASS fade_in effect problems to watch

I am trying to get a differents divs with gradients color, from darker to lighter.

I can watch how my code edit lighter the color, but i can't watch the darker effect. I review the code and all are working correctly. The fade_out effect is working, but not the fade_in effect - at it is identical. When I review the css file generated, i watch that the background-color are the same that the $color-base value. Why the fade_in effect is not appreciating?

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>

Upvotes: 1

Views: 491

Answers (1)

Arkellys
Arkellys

Reputation: 7803

The function fade-in() is doing the same as opacify() and according to the documentation:

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

Your $color-base values are all opaque and therefore the fade-in() function doesn't apply since their alpha channels have already the max value. If you try with a base color with an alpha value lower than 1 you will see that your code works fine.

Upvotes: 1

Related Questions