【问题标题】：How can I prevent SASS variables from being overwritten in Foundation?如何防止 SASS 变量在 Foundation 中被覆盖？
【发布时间】：2016-12-17 08:46:02
【问题描述】：

我已经使用 Bower 安装了 Foundation SASS。然后我在main.scss 上导入了基础并通过以下命令对其进行了初始化：

@import "../vendor/foundation-sites/scss/foundation.scss";
@include foundation-everything(true); // Init the foundation

问题是，有一个设置文件_settings.scss，我需要覆盖该foundation.scss 导入。因为我不应该接触 Bower 目录中的文件，vendor/，所以我需要在我的main.scss 上进行这些更改。不，_settings.scss 没有使用!default 功能。如何定义设置的 sn-p 如下：

$global-font-size: 100%;
$global-width: rem-calc(1200);
$global-lineheight: 1.5;

有什么方法可以在包含之前定义一个变量，这样它就不会被覆盖？有点像..

$global-font-size: 16px !important;
$global-width: 1000px !important;
$global-lineheight: 1 !important;    
@import "../vendor/foundation-sites/scss/foundation.scss";
@include foundation-everything(true); // Init the foundation

【问题讨论】：

您应该在_settings.scss 文件中编辑这些值。你有不想这样做的理由吗？
我已经使用 Bower 安装了它，所以假设将来有更新，该文件夹中的任何内容都将被覆盖。因此，为避免这种情况，我将覆盖我的 main.css

标签： sass zurb-foundation bower

【解决方案1】：

两种情况，两种方式：

你必须在 bower 中维护一个包

我将使用symbolic link 让事情变得简单。看看我的项目文件。

我已经用凉亭安装了基础：

bower_component/foundation/scss/{...whatever}.scss

然后我会创建一个指向 .bower_component/foundation/scss 文件夹的符号链接。

src/scss/foundation        # this is a symbolic link to -> ./bower_component/foundation/scss

我从 bower_component 中复制了我想要自定义的文件。

src/scss/my_settings.scss  # copied from foundation/scss folder

我添加了我自己的 scss。

src/scss/main.scss

将我所有的自定义和foundation.scss全部导入

@import 'my_settings' ;
@import '...other_customization...'
@import 'foundation/foundation' ;

然后构建src/scss/main.scss，一切正常。

然后你就可以不用担心用 bower 维护基础版本了。不管bower_components/foundation有什么变化，只要确保文件夹名和相对路径正确，一切都会好起来的。

嗯，版本没那么重要。

问自己一个问题。 Bower 维护的基础对您有什么好处？如果您没有充分的理由，您可以将基础移出 bower_component 文件夹并进行任何您想要的更改。

Bower 不会向用户规定其自己的构建系统，也不会向开发一种包含库（AMD、CommonJS 等）的方法 Bower 所做的是安装正确版本的软件包，项目需求及其依赖关系。 换句话说：它下载正确库的源文件以及他们需要的所有内容特殊文件夹。 其他一切都取决于开发人员。引用自：Artem Sapegin

【讨论】：