1.css变量 当变量的类型为数字时，不能和单位直接拼接，需要用calc函数拼接

div {
  color: var(--color, blue);
  --width: 50;
  width: calc(var(--width) * 1px);
  background-color: red;
}

2.css变量 当变量的类型为字符串时，可以与其他字符串拼接

div::after {
  --text1: 'hello ';
  --text2: var(--text1) 'world';
  content: var(--text2, '萨瓦迪卡') '!'
}