Foundation是面向中高级前端的响应式工具集，适合需统一设计系统、多项目复用且能维护Sass构建流程的团队；它无默认视觉样式，靠_settings.scss配置驱动，不适用于只想快速套用样式的场景。
Foundation 是什么，适合什么人用
Foundation 不是“写完就能上线”的成品模板，而是面向中高级前端的响应式工具集。它默认不带视觉风格（比如按钮颜色、字体大小），靠 _settings.scss 配置驱动，适合需要统一设计系统、多项目复用、且团队能维护 Sass 构建流程的场景。如果你只是想快速套个现成样式，Bootstrap 或 Tailwind 可能更省事。
初始化项目时必须改的三个配置项
直接 npm install foundation-sites 后，别急着写 HTML —— 先打开 scss/app.scss 里引入的 _settings.scss，否则栅格、断点、间距全按默认值走，后期改起来反受限制。
-
$grid-column-count: 12：可改成6或24，但改完要同步检查所有small-6类是否还合逻辑 -
$breakpoints里的medium默认是64em（1024px），国内很多设计稿以 768px / 1024px 为分界，建议显式改为48em和64em -
$global-font-size: 100%是基础字号，若项目要求根字体为16px，这里别动，改html的font-size更安全
栅格系统里最容易误用的 class 组合
Foundation 的栅格不是“写上就生效”，它依赖嵌套层级和 class 语义。常见错误是把 row 和 columns 当成 Bootstrap 那样扁平使用。
.row {
// 必须有这个 class，否则 flex 布局不触发
}
.columns {
// 不是 .col-md-6，而是 .columns + 宽度类
}
.small-12.medium-6.large-4 {
// 宽度类必须和 .columns 同级，不能套在子元素里
}
典型翻车现场：
立即学习“前端免费学习笔记（深入）”；
- 漏写
.row→ 子元素不换行，.small-6失效 - 把
.small-6加在<div class="row">上 → 栅格宽度应用到容器，而非内容区 - 在
.columns内部再嵌套.row却没加.columns→ 内层栅格塌陷，margin 错乱
JavaScript 组件启用前的两个硬性前提
Foundation 的 JS 组件（如 Dropdown、Off-canvas）不是开箱即用。缺任意一个，控制台报错或功能静默失效。
- DOM 必须已加载完成，
$(document).foundation()不能放在<head>里执行 - 每个组件依赖对应 HTML 结构，比如
Dropdown要求触发元素带data-toggle，菜单容器带data-dropdown-menu，少一个属性就不展开 - 如果用 webpack 打包，需显式 import：
import { Dropdown } from 'foundation-sites/js/foundation.dropdown';，否则 tree-shaking 会删掉未引用的模块
调试时看控制台有没有 Foundation is not defined 或 Cannot read property 'init' of undefined，基本就是构建链路断了。
Foundation 的复杂度不在语法，而在它把决策权交给你：断点怎么切、栅格怎么分、JS 模块怎么载入。这些地方没对齐，后面越写越像在修 bug。
