如何编辑foundation-sites框架的scss变量并重新编译CSS？

我一直在寻找一种方法来编辑基础框架中响应式嵌入类的变量。我一直在尝试遵循文档，我也尝试查看他们的 youtube 频道以获得支持。但是，我对 SCSS/SASS 或 gulp 没有经验，而且我无法从文档中了解太多。

我正在尝试将响应嵌入比率的默认属性更改为 9 x 16。变量看起来像这样。

$responsive-embed-ratios: (
  default: 16 by 9,vertical: 9 by 16,panorama: 256 by 81,square: 1 by 1,);

我试图遵循的文档是 HERE

我将 React.js 与 create-react-app 一起使用，并且我已经通过 NPM 安装了基础站点。