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.
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);
}
style