How to pass CSS custom properties to sass Built-In Modules?

Question

I am working on a vue project. In one of my components I used sass and tried to access a mixin that gives a hover effect. This is the code of my component:

<template>
  <div class="greetings">
    <h1>{{ msg }}</h1>
    <button id="myButton" class="btn btn-secondary">hover me</button>
  </div>
</template>

<script setup>
defineProps({
  msg: {
    type: String,
    required: true
  }
})
</script>

<style scoped lang="scss">
@use "../assets/sass-folder/variables";
@use "../assets/sass-folder/mixins";

h1 {
    color: var(--info);
}
    
 .greetings #myButton {
     @include mixins.hover-effect-1(var(--info));
    }

</style>

In that code, I could access var(--info) value that was defined in my other "scss" files like variables.scss. Also in browser devtools the value of that is correctly calculated as rgb(103, 14, 181). In my mixins.scss file I have this code:

@use "sass:color";
@mixin hover-effect-1($color) {
    @debug $color;
    &:hover {
        color: $color;
        background-color: color.scale($color, $lightness: 50%);
    }
}

But I give this error:

$color: var(--info) is not a color
background-color: color.scale($color, $lightness: 50%);

That means color.scale() sass Built-In Modules does not recognize my css custom variable. Why this happens and how to fix it? If I change my @include to something like this:

@include mixins.hover-effect-1(#4852FF);
/* or this one */
@include mixins.hover-effect-1(rgb(103, 14, 181));

It works fine and without error.

How to pass CSS custom properties to sass Built-In Modules?

0 Answers0