自定义属性与计算

自定义属性

CSS自定义属性（也称为CSS变量）允许开发者在样式表中定义可复用的值，并通过变量名引用它们。自定义属性的声明以--开头，并通过var()函数调用。这种机制极大地提升了CSS的可维护性和灵活性。

:root {
  --primary-color: #3498db;
  --spacing-unit: 8px;
}

.button {
  background-color: var(--primary-color);
  padding: var(--spacing-unit) calc(var(--spacing-unit) * 2);
}

自定义属性的作用域遵循CSS层叠规则。在:root中定义的变量具有全局作用域，而在特定选择器中定义的变量只在该选择器及其子元素中有效。当同一个变量名在不同作用域被声明时，会按照CSS优先级规则进行覆盖。

.container {
  --text-size: 16px;
}
.container.large {
  --text-size: 20px;
}
.container .text {
  font-size: var(--text-size);
}

自定义属性支持动态更新，这使得它们可以与JavaScript交互实现实时样式调整。通过setProperty方法可以修改自定义属性的值：

document.documentElement.style.setProperty('--primary-color', '#e74c3c');

计算函数

CSS的计算函数calc()允许在属性值中执行数学运算，支持加减乘除四种基本运算。这个函数特别适用于需要混合不同单位的场景。

.sidebar {
  width: calc(25% - 20px);
  margin-right: 20px;
}

calc()函数可以与自定义属性结合使用，创建动态的、响应式的布局系统：

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

.heading {
  font-size: calc(var(--base-size) * var(--multiplier));
}

计算函数支持嵌套使用，可以实现更复杂的计算逻辑。运算符号前后必须保留空格，这是语法强制要求的：

.container {
  width: calc(100% / 3 - calc(10px + 5px));
}

自定义属性与计算的结合应用

将自定义属性与计算函数结合使用，可以创建高度灵活的设计系统。以下是一个响应式网格布局的示例：

:root {
  --grid-columns: 12;
  --gutter-width: 15px;
}

.grid-item {
  --item-span: 3;
  width: calc(100% / var(--grid-columns) * var(--item-span) - var(--gutter-width));
  margin: 0 calc(var(--gutter-width) / 2);
}

这种组合在动画效果中也十分有用，可以实现基于数学计算的复杂动效：

@keyframes pulse {
  0% {
    --scale-factor: 1;
  }
  50% {
    --scale-factor: 1.2;
  }
  100% {
    --scale-factor: 1;
  }
}

.element {
  --base-size: 50px;
  animation: pulse 2s infinite;
  width: calc(var(--base-size) * var(--scale-factor));
  height: calc(var(--base-size) * var(--scale-factor));
}

实际开发中的高级技巧

在媒体查询中使用自定义属性和计算可以实现更简洁的响应式代码。相比传统方式，这种方法减少了重复代码：

:root {
  --base-font-size: 16px;
  --spacing-unit: 8px;
}

@media (min-width: 768px) {
  :root {
    --base-font-size: 18px;
    --spacing-unit: 10px;
  }
}

body {
  font-size: var(--base-font-size);
  margin: calc(var(--spacing-unit) * 2);
}

自定义属性还可以用于创建主题切换功能。通过修改顶层变量值，可以轻松实现整个应用的皮肤切换：

:root[data-theme="dark"] {
  --bg-color: #333;
  --text-color: #fff;
}
:root[data-theme="light"] {
  --bg-color: #fff;
  --text-color: #333;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
}

性能考量与最佳实践

虽然自定义属性和计算功能强大，但需要注意性能影响。过度复杂的计算可能导致渲染性能下降。以下是一些优化建议：

1. 避免在动画属性中使用嵌套的计算函数
2. 将不常变化的计算值存储在单独的变量中
3. 限制自定义属性的作用域范围

/* 不推荐 */
.element {
  width: calc(calc(100% / var(--columns)) - calc(var(--gutter) * 2));
}

/* 推荐 */
:root {
  --column-width: calc(100% / var(--columns));
}
.element {
  width: calc(var(--column-width) - calc(var(--gutter) * 2));
}

自定义属性的回退值机制可以增强代码的健壮性。当变量未定义时，可以提供备用值：

.element {
  color: var(--undefined-var, #000);
  font-size: var(--undefined-size, 16px);
}

浏览器支持与渐进增强

现代浏览器对自定义属性和计算函数的支持已经相当完善，但在旧版本浏览器中可能需要回退方案。可以使用特性查询@supports检测支持情况：

.title {
  font-size: 18px;
}

@supports (--css: variables) {
  .title {
    font-size: var(--title-size);
  }
}

对于关键样式，建议始终提供静态回退值。这样即使在不支持自定义属性的浏览器中，内容仍然保持可访问：

.container {
  margin: 10px; /* 回退值 */
  margin: var(--spacing);
}

创意应用示例

自定义属性与计算的组合可以实现一些创新的设计效果。比如创建基于视口单位的动态排版系统：

:root {
  --min-font: 16px;
  --max-font: 24px;
  --min-width: 320px;
  --max-width: 1200px;
}

.heading {
  font-size: calc(
    var(--min-font) + (var(--max-font) - var(--min-font)) * 
    ((100vw - var(--min-width)) / (var(--max-width) - var(--min-width)))
  );
}

另一个创意应用是创建交互式的数据可视化。通过JavaScript动态更新CSS变量，可以实现平滑的过渡效果：

<div class="chart" style="--value: 0.75"></div>
<style>
.chart {
  --size: 100px;
  width: var(--size);
  height: var(--size);
  background: conic-gradient(
    #3498db calc(var(--value) * 360deg),
    #ecf0f1 0
  );
  border-radius: 50%;
  transition: --value 0.5s ease;
}
</style>
<script>
document.querySelector('.chart').style.setProperty('--value', 0.9);
</script>