运算与函数的应用

运算与函数在CSS中扮演着重要角色，它们不仅简化了样式计算，还增强了动态布局的能力。从基础的算术运算到复杂的自定义函数，这些工具让开发者能够更灵活地控制样式。

基础运算的使用

CSS支持基础的算术运算，包括加法（+）、减法（-）、乘法（*）和除法（/）。这些运算可以直接在属性值中使用，例如计算宽度或间距：

.container {
  width: calc(100% - 40px); /* 容器宽度减去40像素 */
  padding: calc(1rem * 2);  /* 内边距为2倍rem单位 */
}

运算时需注意单位一致性。例如，以下代码会报错，因为单位不匹配：

.error-example {
  width: calc(100% - 20px); /* 正确 */
  margin: calc(10em + 5px);  /* 错误：混合单位需明确处理 */
}

CSS自定义函数

通过@function可以创建自定义函数，复用复杂计算逻辑。例如创建一个将像素转换为rem的函数：

@function px-to-rem($px) {
  @return calc($px / 16) * 1rem;
}

.text {
  font-size: px-to-rem(24); /* 转换为1.5rem */
}

再比如实现一个颜色混合函数：

@function mix-colors($color1, $color2, $weight) {
  @return mix($color1, $color2, $weight);
}

.header {
  background: mix-colors(#ff0000, #0000ff, 70%);
}

动态样式计算

结合CSS变量和calc()可以实现响应式布局。例如根据视口宽度动态调整字体大小：

:root {
  --base-size: 16px;
  --scale-factor: 0.5vw;
}

body {
  font-size: calc(var(--base-size) + var(--scale-factor));
}

另一个例子是创建等间距网格布局：

.grid {
  --columns: 4;
  --gap: 20px;
  display: grid;
  grid-template-columns: repeat(var(--columns), 1fr);
  gap: var(--gap);
  width: calc(100% - var(--gap) * (var(--columns) - 1));
}

条件运算技巧

虽然CSS没有直接的if语句，但可以通过clamp()、min()和max()实现条件判断效果：

.responsive-box {
  width: clamp(300px, 50vw, 800px); /* 最小值300px，理想值50vw，最大值800px */
  height: min(100vh, 800px);       /* 不超过800px */
  margin: max(2rem, 10vh);         /* 至少2rem */
}

颜色深浅切换的例子：

:root {
  --light: #ffffff;
  --dark: #333333;
  --text-color: var(--light);
}

[data-theme="dark"] {
  --text-color: var(--dark);
}

body {
  color: var(--text-color);
  background: hsl(
    calc(var(--hue, 210) + 180),
    calc(var(--saturation, 100%) - 20%),
    calc(var(--lightness, 50%) + 30%)
  );
}

复杂函数应用

CSS的transform属性常配合复杂函数使用。以下是3D旋转示例：

.cube {
  transform: 
    rotateX(calc(var(--angle, 15deg) * 2))
    rotateY(calc(var(--angle, 15deg) * 0.5))
    scale(calc(1 + var(--scale, 0.1)));
}

渐变颜色计算：

.gradient {
  background: linear-gradient(
    calc(var(--angle, 45deg) + 90deg),
    hsl(calc(var(--hue) + 30), 70%, 50%),
    hsl(var(--hue), 70%, 50%)
  );
}

性能优化考量

虽然运算功能强大，但过度使用可能影响性能。例如避免在动画中频繁计算：

/* 不推荐 */
@keyframes slide {
  to {
    transform: translateX(calc(100vw - 100%));
  }
}

/* 推荐 */
@keyframes slide {
  to {
    transform: translateX(100%);
  }
}

预处理器中的运算示例：

$base-spacing: 16px;

@function spacing($multiplier) {
  @return $base-spacing * $multiplier;
}

.card {
  margin: spacing(2); /* 32px */
  padding: spacing(0.5); /* 8px */
}

实际应用案例

创建一个响应式卡片布局，卡片宽度随数量动态调整：

.card-grid {
  --column-count: 4;
  --gap-size: 20px;
  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(
      calc((100% - var(--gap-size) * (var(--column-count) - 1)) / var(--column-count)),
      300px
    )
  );
  gap: var(--gap-size);
}

动态阴影效果：

.card {
  --shadow-offset: 5px;
  box-shadow: 
    calc(var(--shadow-offset) * 1) calc(var(--shadow-offset) * 1) 10px rgba(0,0,0,0.1),
    calc(var(--shadow-offset) * -1) calc(var(--shadow-offset) * -1) 10px rgba(255,255,255,0.5);
}

.card:hover {
  --shadow-offset: 10px;
}

浏览器兼容性处理

针对不支持新特性浏览器的回退方案：

.progress-bar {
  width: 80%; /* 回退值 */
  width: clamp(300px, 50vw, 800px);
}

@supports not (width: clamp(1px, 2px, 3px)) {
  .progress-bar {
    width: min(50vw, 800px);
  }
}

CSS变量与预处理器变量结合：

:root {
  --primary-color: #3498db;
}

$secondary-color: #e74c3c;

.button {
  background: var(--primary-color);
  border-color: $secondary-color;
}