CSS变量：同时进行数值计算和字符串拼接

在CSS中，变量（自定义属性）可以通过calc()函数进行数值计算，但直接进行字符串拼接需要一些技巧。以下是实现这两种操作的方法：

数值计算

使用calc()函数可以轻松实现数值计算：

:root {
  --base-size: 16;
  --padding: 2;
}

.element {
  /* 计算像素值 */
  font-size: calc(var(--base-size) * 1px);
  padding: calc(var(--padding) * 1px) calc(var(--padding) * 2px);

  /* 更复杂的计算 */
  width: calc(100% - (var(--base-size) * 3px);
}

字符串拼接

CSS本身不直接支持字符串拼接，但可以通过以下方法实现类似效果：

方法1：使用多个变量

:root {
  --prefix: "Hello, ";
  --name: "World";
  --suffix: "!";
}

.element::before {
  content: var(--prefix) var(--name) var(--suffix);
}

方法2：利用CSS计数器（有限制）

:root {
  --string-part1: "Part1";
  --string-part2: "Part2";
}

.element::before {
  counter-reset: string var(--string-part1) var(--string-part2);
  content: counter(string);
}

方法3：结合CSS和HTML属性

<div class="element" data-prefix="Hello, " data-name="World"></div>

.element::before {
  content: attr(data-prefix) attr(data-name) "!";
}

同时进行数值计算和字符串拼接

要实现同时包含计算和拼接的效果，可以结合上述方法：

:root {
  --base: 16;
  --multiplier: 2;
}

.element {
  /* 计算后拼接单位 */
  font-size: calc(var(--base) * var(--multiplier) * 1px);

  /* 字符串拼接效果 */
  --message: "The calculated size is: ";
  --size: calc(var(--base) * var(--multiplier));
}

.element::after {
  content: var(--message) var(--size) "px";
}

注意事项

1. CSS变量计算是在运行时进行的，不是预处理
2. 字符串拼接功能有限，复杂场景可能需要结合JavaScript
3. 浏览器兼容性：现代浏览器都支持CSS变量，但IE不支持

对于更复杂的字符串操作，通常建议使用CSS预处理器(如Sass/Less)或在HTML/JavaScript层面处理。