VUE CSS

useCssVars  和  v-bind 都可以用于动态修改 CSS

useCssVars 示例

 const color = ref('red');
 
 useCssVars(() => ({
   'my-background-color': color.value,    # 没有前缀 --
 }));

 .mydiv {
   width: 200px;
   height: 80px;
   background-color: var(--my-background-color);  # 有前缀 --
 }

 V-bind 示例

  const mycolor = ref('red');

  .mydiv {
    width: 200px;
    height: 80px;
    background-color: v-bind(mycolor);
  }

 

SCSS 变量
$color-primary

对应的 vue CSS 变量
--el-color-primary