如何防止 SASS 变量在 Foundation 中被覆盖？

Question

我已经使用 Bower 安装了 Foundation SASS。然后我导入了 foundation 并在 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 功能。设置定义的片段如下：

$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

Answer 1

两种情况，两种方式：

你必须在 bower 中维护一个包

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

我已经用 bower 安装了 foundation :

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来维护foundation版本了。不管bower_components/foundation有什么变化，只要确保文件夹名称和相对路径正确，就可以了。

嗯，版本不是那么重要。

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

Bower doesn't prescribe to the user its own build system, or to the developer a method of including libraries (AMD, CommonJS, etc.) All Bower does is install the right versions of the packages that the project needs and their dependencies. In other words: it downloads source files for the right libraries and everything they need into a special folder. Everything else is up to the developer. Quoted from : Artem Sapegin

如何防止 SASS 变量在 Foundation 中被覆盖？

How can I prevent SASS variables from being overwritten in Foundation?

sass

zurb-foundation

bower

你必须在 bower 中维护一个包

嗯，版本不是那么重要。