CSS变量在样式复用中的高级技巧

代码问答

Q1: 我听说CSS变量可以进行计算，这是真的吗？能否给我一个例子？

A1: 是的，CSS变量可以在var()函数中进行计算。例如，你可以定义一个基础大小，然后基于这个大小计算其他值：

:root {
    --base-spacing: 8px;
    --double-spacing: calc(var(--base-spacing) * 2);
}

.margin-example {
    margin: var(--double-spacing);
}

 

Q2: 如果我需要为尚未定义的CSS变量提供一个默认值，我该怎么做？

A2: 使用var()函数的第二个参数可以为变量提供一个默认值。如果变量未定义，将使用这个默认值：

.element {
    color: var(--some-color, #666);
}

小提示: 使用默认值可以作为后备方案，确保即使在某些变量未定义的情况下，样式也能正常工作。