组件开发使用css变量

在使用vue开发一个通用组件时，需要动态传递css属性值，这个时候就用到了css的变量了

css变量语法

//声明变量
//全局声明
:root{
    --color:#369
}
//局部声明
.xuanzeqi{
    --width:'100px'
}
//使用
.xuanzeqi{
    width:var(--width);
    color:var(--color);
}

全局声明在整个页面都可以使用

局部声明是在某个选择器下声明，之后该变量只能在该选择器下使用

在vue语法中传递css变量

<div :style="{'--underline-color': underlineColor}">
    Demo
</div>
<script>
	export default{
        props:{
            underlineColor:{
                default:'#369'
            }
        }
    }
</script>

注意

在这里要注意，声明css变量时，采用连字符连接单词，不要使用驼峰命名。使用驼峰命名会导致变量失效

如果有错误，请斧正