Deprecation warning (passing a number without unit) about bootstrap

[julien-deramond]

Thanks for opening this issue @miken32
The fix has been done for opaque because we used 100 instead of 100% within this function and the modification was:

@function opaque($background, $foreground) {
-  @return mix(rgba($foreground, 1), $background, opacity($foreground) * 100);
+  @return mix(rgba($foreground, 1), $background, opacity($foreground) * 100%);
}

For tint-color() and shade-color(), we call mix() with the same exact parameter without transforming it; for example:

@function tint-color($color, $weight) {
  @return mix(white, $color, $weight);
}

@function shade-color($color, $weight) {
  @return mix(black, $color, $weight);
}

My first feeling would be to keep that as-is. It seems more logical to have the exact same type of parameter as Sass itself.

[miken32]

So I can just update my CSS to use % and it will work? Good to know; I’ll leave it to your team to decide whether to change anything or just update documentation. Thanks for the quick reply.

[julien-deramond]

Yep, based on your example, you'll just have to use % in order to make disappear the warnings:

.foo-warnings {
  color: shift-color($success, 48);
  background: shift-color($success, -72);
}

.foo-no-warnings {
  color: shift-color($success, 48%);
  background: shift-color($success, -72%);
}

I’ll leave it to your team to decide whether to change anything or just update documentation.

This is something already mentioned in Customize > Sass > Colors with the following:

.custom-element {
  color: tint-color($primary, 10%);
}

.custom-element-2 {
  color: shade-color($danger, 30%);
}

But let's suggest a PR to add a .custom-element-3 additional example with shift-color() usage too: #39435