CSS也可以赋一个变量值？是的

^^为欢几何^^2024-10-09 15:08

声明一个自定义属性，属性名需要以两个减号（--）开始，属性值则可以是任何有效的CSS值。

css 复制代码

/*:root 选择器匹配文档根元素。*/
/*在 HTML 中，根元素始终是 html 元素。*/
/*也就是说：root 表示的是根元素*/

 //声明
:root {
  --main-bg-color: brown;
}

//使用
element {
  background-color: var(--main-bg-color);
}

//场景二：
const colorStyle = computed(() => ({
    '--dynamic-color': selectedColor.value,
}));

::v-deep(.el-textarea__inner) {
    color: var(--dynamic-color);
}

用 var() 函数可以定义多个备用值，当给定值未定义时将会用备用值替换。

css 复制代码

/*如果提供了第二个参数，则表示备用值，当自定义属性值无效时生效。
第二个参数可以嵌套，但是不能继续平铺展开下去了，例如：*/
.two {
  color: var(--my-var, red); 
}
 
.three {
    background-color: var(--my-var, var(--my-background, pink)); 
}
 
.three {
    background-color: var(--my-var, --my-background, pink); 
}

注意：

自定义属性名是大小写敏感的，--my-color 和 --My-color 会被认为是两个不同的自定义属性。同时不能包含$， $，\^，(，%等字符，普通字符局限在只要是"数字\[0-9$ ""字母 $a-zA-Z$ ""下划线_"和"短横线-"这些组合，但是可以是中文，日文或者韩文
根据CSS的空格尾随特性font-size:var(--size)px等同于font-size:20 px，注意，20后面有个空格，所以，这里的font-size使用的是元素默认的大小。

css 复制代码

//结果为默认大小
body {
    --size: 20;   
    font-size: var(--size)px;
}

//正确方法（1）
//结果为20px
body {
  --size: 20px;   
  font-size: var(--size);
}

//正确方法（2）
//结果为20px
body {
  --size: 20;   
  font-size: calc(var(--size) * 1px);
}