Define CSS variables directly via component option
egoist opened this issue · comments
EGOIST commented
<template>
<h1>hello</h1>
</template>
<script>
export default {
cssVariables() {
return {
fontSize: this.size + 'px'
}
}
}
</script>
<style scoped>
h1 {
font-size: var(--fontSize);
}
</style>
Daniel Waltz commented
Doesn't feels quite as elegant to me, but it definitely helps when you need to be explicit about the units you're using. I have no idea what the overhead might be, but I think having a css var available for every data item/prop would be nicer than having to be explicit about what is available to the style block. I think data/props with a number type could probably default to px
as well (unless it's 0
).
Brandon Pittman commented
This feels Vue-like. You have to tell the templates what components are available, so why not tell style blocks which variables are available?