Sass for Loop Updating Hsla Lightness Returns Error $Lightness: "96.77419" Is Not a Number for 'Hsla'

SASS for loop updating hsla lightness returns error $lightness: 96.77419 is not a number for `hsla'

Sass gave you the answer: you're using strings when you shouldn't be (note the quotations in the error, that's a sure sign of a string). Interpolation gives you a string all the time no matter what. Because hsla() expects all arguments to be numbers, passing it a string results in getting the string hsla() instead of the Sass color representation for hsla(), and the lighten() function can only accept colors.

So just stop giving it a string:

.foo {
    background: hsla(60, 1, ($base - $math), 1);
}

Sass lighten function issue

$i contains a number. Keep using it as a number instead of using concatenation :

@for $i from 1 through 4{
    .par-#{$i}{
        background: lighten(#08725D, $i * 10);
        padding: 10px;
        border-radius: 5px;
    }
}

Why can't I use a hex-color $var in transparentize (inside a @each loop)

If you see the documentation of transparentize, you can see that the variables are passing without quotes.

One valid option, is to pass the exact value of the string, without #{}, transparentize process it correctly:

$buttons: ("success", #36B54A),("warning", #CCC);

.btn {
    display: inline-block;
    background: #FFF;
    border-radius:5px;
    min-width:180px;
    margin: 0;

    @each $button in $buttons {

        &.#{nth($button, 1)} {
            $color: nth($button, 2);
            border: 1px solid $color;
            color: $color;
            background: transparentize($color, 0.8);

                &:hover {
                    background: $color;
                    color:  #FFF;
                }
        }
    }

    &.large {height: 50px;}
    &.fill  {width:100%;}
}

Hope it helps.

Regards.

---

Related Topics