Use v-bind in a scss (sass) variable VueJS

Question

I'm working on a component in VueJs and I want to make a color attribute that take hexadecimal color and convert into rgb color with rgba function of sass and work with it.

props: {
    color: {
        type: String,
        default: '#195cff'
    }
}

I tried to do it like this:

$color: v-bind(color);

input {
    background: rgba($color, 0.5);
}

But I think v-bind is not accessible in sass variable. How can I do this work.

Answer 1

That's strictly impossible but I found a way to have a similar result.

props: {
        color: {
            type: String,
            default: '#195cff',
        },
    },
    methods: {
        hexToRgb(hex) {
            let result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
            return result ? {
                r: parseInt(result[1], 16),
                g: parseInt(result[2], 16),
                b: parseInt(result[3], 16)
            } : null;
        }
    },
    data: function () {
        return {
            rgbColor: `${this.hexToRgb(this.color).r},${this.hexToRgb(this.color).g},${this.hexToRgb(this.color).b}`
        }
    }

And in css

input {
    background: rgb(v-bind(rgbColor),0.5);
}