foundation 是需主动约束的复杂定制工具集，并非更适专业开发；其 xy-grid 需手动启用并配置断点缩放，orbit 依赖严格加载顺序，颜色系统需同步重定义 $foundation-palette 才生效。
Foundation 不是“更适合专业开发”的 CSS 框架——它是一套为复杂定制需求设计的、需要主动约束的工具集，用错场景反而拖慢进度。
为什么 foundation-sites 的栅格在现代项目里常被绕开
它的 xy-grid 虽然支持 flex + gap + auto-placement，但默认启用需手动关闭旧版 float-grid，且文档中关键配置（如 $grid-column-count）不随断点自动缩放，容易误以为“响应式已内置”。
- 必须在
_settings.scss中显式设$xy-grid: true，否则仍走 float 回退逻辑 -
small-6 medium-4 large-3这类 class 在xy-grid下实际被忽略，得改用cell small-6 medium-4 large-3且配合grid-x容器 - IE11 支持靠的是 JS 补丁
foundation.util.mediaQuery，若未调用$(document).foundation()，断点类完全不生效
Orbit 轮播组件报 Uncaught TypeError: Cannot read property 'init' of undefined 怎么办
这是 Foundation 6.7+ 的典型加载时序问题：JS 组件注册依赖于 foundation.core 的全局 Foundation 对象，但模块化引入时容易漏掉基础依赖。
- 用 ES6 import 时，必须按顺序引入：
import {Foundation} from 'foundation-sites/js/foundation.core';→import {Orbit} from 'foundation-sites/js/foundation.orbit';→ 最后Foundation.addToJQuery($); - 直接 script 标签引入需确认
foundation.js（含全部组件）在jquery.js之后、自定义 JS 之前 - 若只用部分组件，
Orbit依赖foundation.util.keyboard和foundation.util.timerAndImageLoader，缺一则 init 失败
自定义主题时 $primary-color 改了但按钮没变色
Foundation 的颜色系统分两层：Sass 变量控制基础色值，而组件样式（如 button）默认使用 foundation-palette() 函数生成调色板，不直读变量。
立即学习 “ 前端免费学习笔记（深入）”；
- 修改
$primary-color后，必须同步重定义$foundation-palette，例如：$foundation-palette: (primary: $primary-color, secondary: $secondary-color); - 若跳过这步，
.button.primary仍取函数返回的默认#1779ba，而非你设的$primary-color - 所有基于 palette 的组件（
alert、badge、progress）都受此影响，不是单改一个变量就能全局生效
Foundation 的灵活性藏在配置深度里，但每多一层抽象，就多一个忘记初始化或配错依赖的可能。真正卡住人的，往往不是“怎么用”，而是“哪一步没告诉它该用哪个版本的自己”。
