CSS `Functional Programming` 思想在 `CSS Variables` 与 `calc()` 中的体现

各位观众老爷们，大家好！今天咱们不聊八卦，来点硬核的，聊聊 CSS 里那些隐藏的“函数式编程”小心机。别害怕，虽然名字听起来高大上，但保证你听完之后，感觉 CSS 也能玩出花儿来！

咱们今天要聊的核心是：CSS Variables (自定义属性) 和 calc() 函数，以及它们如何体现函数式编程的思想。

什么是函数式编程？别怕，三句话概括：

纯函数： 给定相同的输入，永远返回相同的输出，没有副作用（不改变外部状态）。
不可变性： 数据一旦创建，就不能被修改。
函数是一等公民： 函数可以像变量一样传递和使用。

听起来有点抽象？没关系，咱们用 CSS 的例子来解释。

一、CSS Variables：变量，但不仅仅是变量

CSS Variables，又称自定义属性，用 -- 开头定义。它们允许你存储值，并在整个样式表中重复使用。乍一看，这好像只是提高了代码的可维护性，避免了到处复制粘贴。但实际上，它也为函数式编程的思想埋下了伏笔。

:root {
  --base-color: #3498db;
  --spacing-unit: 16px;
}

body {
  background-color: var(--base-color);
  margin: var(--spacing-unit);
}

h1 {
  color: var(--base-color);
  margin-bottom: calc(var(--spacing-unit) * 2); /* 别急，calc() 后面讲 */
}

1. 作用域：局部变量与全局变量

CSS Variables 有作用域的概念，可以在 :root (全局) 或特定元素 (局部) 中定义。这有点像函数中的局部变量和全局变量。

:root {
  --base-font-size: 16px; /* 全局 */
}

.container {
  --base-font-size: 18px; /* 局部，覆盖全局 */
  font-size: var(--base-font-size); /* 使用 .container 内部的 --base-font-size */
}

p {
  font-size: var(--base-font-size); /* 使用 :root 中的 --base-font-size */
}

2. 动态性：CSS Variables 的响应式

CSS Variables 可以通过 JavaScript 动态修改，从而实现响应式效果。这就像函数接受参数，根据参数的不同返回不同的结果。

<button id="theme-toggle">切换主题</button>

<style>
  :root {
    --bg-color: white;
    --text-color: black;
  }

  body {
    background-color: var(--bg-color);
    color: var(--text-color);
    transition: background-color 0.3s, color 0.3s; /* 平滑过渡 */
  }

  .dark-theme {
    --bg-color: black;
    --text-color: white;
  }
</style>

<script>
  const themeToggle = document.getElementById('theme-toggle');
  themeToggle.addEventListener('click', () => {
    document.body.classList.toggle('dark-theme');
  });
</script>

在这个例子中，点击按钮会切换 body 的 dark-theme 类，从而修改 --bg-color 和 --text-color 的值，实现主题切换。这就像一个 setTheme 函数，根据传入的参数 (是否为 dark theme) 修改对应的颜色值。

二、calc() 函数：CSS 的计算器

calc() 函数允许你在 CSS 中进行计算。这听起来很普通，但它与 CSS Variables 结合使用，就可以实现更复杂的逻辑，更接近函数式编程的思想。

.element {
  width: calc(100% - 20px);
  font-size: calc(var(--base-font-size) * 1.2);
  margin-left: calc(var(--spacing-unit) / 2);
}

1. 组合与复用：构建更复杂的逻辑

calc() 可以与其他 CSS 函数 (如 min(), max(), clamp()) 组合使用，构建更复杂的逻辑。这就像函数可以嵌套调用，实现更复杂的功能。

.container {
  width: clamp(300px, 50%, 800px); /* 限制容器宽度在 300px 到 800px 之间，优先使用 50% */
  height: calc(100vh - var(--header-height) - var(--footer-height)); /* 根据 header 和 footer 的高度计算容器高度 */
}

2. 响应式计算：根据屏幕尺寸调整样式

calc() 可以与 viewport units (如 vw, vh) 结合使用，实现响应式计算。这就像函数可以根据不同的屏幕尺寸返回不同的值。

.element {
  font-size: calc(1vw + 1em); /* 字体大小随屏幕宽度变化 */
  padding: calc(0.5vw + 0.5vh); /* padding 随屏幕宽度和高度变化 */
}

三、CSS Variables + calc()：函数式编程的体现

现在，让我们把 CSS Variables 和 calc() 结合起来，看看它们如何体现函数式编程的思想。

1. 纯函数：calc() 的本质

calc() 函数本质上是一个纯函数。给定相同的输入 (CSS Variables 的值)，它总是返回相同的输出 (计算结果)。它不会改变外部状态，没有副作用。

2. 不可变性：CSS Variables 的只读特性 (有限的)

虽然 CSS Variables 可以通过 JavaScript 动态修改，但在 CSS 内部，它们的值是不可变的。你不能在 CSS 中直接修改 CSS Variables 的值，只能通过重新定义它们来实现。这与函数式编程中的不可变性原则类似。

3. 函数组合：构建可复用的样式模块

我们可以使用 CSS Variables 和 calc() 构建可复用的样式模块，就像函数可以组合成更大的函数一样。

:root {
  --base-font-size: 16px;
  --heading-scale: 1.5; /* 标题缩放比例 */
}

h1 {
  font-size: calc(var(--base-font-size) * var(--heading-scale));
}

h2 {
  font-size: calc(var(--base-font-size) * var(--heading-scale) * 0.8);
}

h3 {
  font-size: calc(var(--base-font-size) * var(--heading-scale) * 0.6);
}

在这个例子中，我们定义了一个 --base-font-size 和一个 --heading-scale，然后使用 calc() 函数计算出不同级别的标题的字体大小。如果我们想要调整所有标题的字体大小，只需要修改 --base-font-size 或 --heading-scale 的值即可。这就像一个 scaleHeading 函数，接受 --base-font-size 和 --heading-scale 作为参数，返回不同级别的标题的字体大小。

四、更高级的用法：CSS 函数与变量的结合

CSS 提供了 min(), max(), clamp() 等函数，结合 CSS 变量，可以实现更复杂的自适应布局和样式。

1. 自适应字体大小：clamp() 函数

clamp(min, val, max) 函数允许你指定一个值的范围，如果 val 小于 min，则返回 min；如果 val 大于 max，则返回 max；否则返回 val。这对于实现自适应字体大小非常有用。

:root {
  --min-font-size: 16px;
  --max-font-size: 24px;
  --preferred-font-size: 4vw; /* 根据屏幕宽度计算的字体大小 */
}

body {
  font-size: clamp(var(--min-font-size), var(--preferred-font-size), var(--max-font-size));
}

在这个例子中，字体大小会根据屏幕宽度自适应调整，但始终保持在 16px 到 24px 之间。

2. 流体间距：结合 calc() 和 viewport units

可以使用 calc() 和 viewport units 实现流体间距，使间距随屏幕宽度变化。

:root {
  --min-spacing: 10px;
  --max-spacing: 30px;
  --preferred-spacing: 2vw;
}

.element {
  padding: calc(var(--min-spacing) + var(--preferred-spacing));
}

五、CSS 函数式编程的优势与局限性

优势：

可维护性： CSS Variables 可以提高代码的可读性和可维护性，避免重复代码。
可复用性： 可以使用 CSS Variables 和 calc() 构建可复用的样式模块。
响应式： 可以使用 CSS Variables 和 calc() 实现响应式布局和样式。
动态性： 可以通过 JavaScript 动态修改 CSS Variables 的值，实现更复杂的交互效果。

局限性：

不支持真正的函数： CSS 缺乏真正的函数定义和调用机制，只能通过 CSS Variables 和 calc() 模拟一些函数式编程的思想。
缺乏控制流： CSS 缺乏条件语句 (if/else) 和循环语句 (for/while)，无法实现复杂的逻辑。
调试困难： CSS 的调试工具相对有限，难以追踪 CSS Variables 的值和 calc() 的计算过程。

六、实战案例：构建一个响应式网格系统

咱们来个实战案例，用 CSS Variables 和 calc() 构建一个简单的响应式网格系统。

:root {
  --grid-columns: 12; /* 网格列数 */
  --grid-gap: 20px; /* 网格间距 */
}

.container {
  display: flex;
  flex-wrap: wrap;
  margin-left: calc(var(--grid-gap) * -0.5); /* 抵消左侧间距 */
  margin-right: calc(var(--grid-gap) * -0.5); /* 抵消右侧间距 */
}

.grid-item {
  padding-left: calc(var(--grid-gap) * 0.5);
  padding-right: calc(var(--grid-gap) * 0.5);
  width: calc(100% / var(--grid-columns)); /* 默认占据一列 */
}

/* 根据屏幕尺寸调整列数 */
@media (max-width: 768px) {
  :root {
    --grid-columns: 6;
  }
}

@media (max-width: 480px) {
  :root {
    --grid-columns: 1;
  }
}

/* 定义占据不同列数的类 */
.col-1 { width: calc(100% / var(--grid-columns) * 1); }
.col-2 { width: calc(100% / var(--grid-columns) * 2); }
.col-3 { width: calc(100% / var(--grid-columns) * 3); }
.col-4 { width: calc(100% / var(--grid-columns) * 4); }
.col-5 { width: calc(100% / var(--grid-columns) * 5); }
.col-6 { width: calc(100% / var(--grid-columns) * 6); }
.col-7 { width: calc(100% / var(--grid-columns) * 7); }
.col-8 { width: calc(100% / var(--grid-columns) * 8); }
.col-9 { width: calc(100% / var(--grid-columns) * 9); }
.col-10 { width: calc(100% / var(--grid-columns) * 10); }
.col-11 { width: calc(100% / var(--grid-columns) * 11); }
.col-12 { width: calc(100% / var(--grid-columns) * 12); }

<div class="container">
  <div class="grid-item col-6">Item 1 (col-6)</div>
  <div class="grid-item col-6">Item 2 (col-6)</div>
  <div class="grid-item col-4">Item 3 (col-4)</div>
  <div class="grid-item col-8">Item 4 (col-8)</div>
</div>

在这个例子中，我们使用 CSS Variables 定义了网格列数和间距，然后使用 calc() 函数计算出每个网格项的宽度。通过修改 --grid-columns 的值，可以轻松调整网格的列数，从而实现响应式布局。

七、总结

虽然 CSS 不是一种真正的函数式编程语言，但我们可以使用 CSS Variables 和 calc() 函数来模拟一些函数式编程的思想，提高代码的可维护性、可复用性和响应性。希望今天的讲座能让你对 CSS 有更深入的理解，也能让你在实际项目中更好地运用这些技巧。

记住，CSS 不仅仅是用来美化页面的，它也可以很强大！

今天的分享就到这里，感谢大家的观看！下次再见！

发表回复 取消回复

发表回复取消回复