zurb-foundation - 将 Foundation 5 与 Hammer for Mac 和 Bourbon 一起使用

Question

昨天我问了一个类似的问题，因为 Compass 花了很多时间来查看和编译我的 Sass 文件。

所以，我提出这个问题。什么是使用像 Foundation 5 这样的框架的理想方式，并且仍然有能力在未来更新它，同时使用 Hammer for Mac 来编译和优化我的样式表，并允许我使用 Bourbon mixin 而不是 Compass。

任何帮助表示赞赏。提前致谢！

Answer 1

我安排我的样式如下，以确保清晰的分离：

styles/
  app.scss
  _settings.scss
  external/
    _bourbon.scss
    _foundation5.scss

我上面的 externals 文件夹不包含供应商 CSS，而是用于（有选择地）通过使用 sass 加载路径导入位于我项目中其他位置的供应商 CSS。

我目前使用 bower 获取供应商 CSS，因此我所有的 CSS 都位于bower_components/项目根目录的文件夹中。通过这种方式，我可以轻松地更新到较新的版本，并且与供应商来源和特定于我的项目的内容有明显的区别。

我发现我还必须解决与波旁威士忌和基础的一些冲突，如下所示。我目前正在使用 Bourbon 3.1.8，但对 3.2（尚未使用当前的 sass 工具链进行编译）进行了短暂的试验，因此注释掉了特定于 Bourbon 3.2 的行：

// external/_bourbon.scss

// we comment out things that conflict with foundation styles
//@import "bower-bourbon/settings/prefixer"; // 3.2+ only
//@import "settings/px-to-em"; // 3.2+ only

// Custom Helpers
@import "bower-bourbon/helpers/deprecated-webkit-gradient"; // 3.1.8 only
@import "bower-bourbon/helpers/gradient-positions-parser";
@import "bower-bourbon/helpers/linear-positions-parser";
@import "bower-bourbon/helpers/radial-arg-parser";
@import "bower-bourbon/helpers/radial-positions-parser";
@import "bower-bourbon/helpers/render-gradients";
@import "bower-bourbon/helpers/shape-size-stripper";

// Custom Functions
//@import "bower-bourbon/functions/assin"; // 3.2+ only
@import "bower-bourbon/functions/compact"; // 3.1.8 only
//@import "bower-bourbon/functions/flex-grid"; // foundation conflict
//@import "bower-bourbon/functions/grid-width"; // foundation conflict
@import "bower-bourbon/functions/linear-gradient";
@import "bower-bourbon/functions/modular-scale";
@import "bower-bourbon/functions/px-to-em";
@import "bower-bourbon/functions/radial-gradient";
//@import "bower-bourbon/functions/strip-units"; // 3.2+ only
@import "bower-bourbon/functions/tint-shade";
@import "bower-bourbon/functions/transition-property-name";
//@import "bower-bourbon/functions/unpack"; // 3.2+ only

// CSS3 Mixins
@import "bower-bourbon/css3/animation";
@import "bower-bourbon/css3/appearance";
@import "bower-bourbon/css3/backface-visibility";
@import "bower-bourbon/css3/background";
@import "bower-bourbon/css3/background-image";
@import "bower-bourbon/css3/border-image";
@import "bower-bourbon/css3/border-radius";
//@import "bower-bourbon/css3/box-sizing"; // foundation conflict
//@import "bower-bourbon/css3/calc"; // 3.2+ only
//@import "bower-bourbon/css3/columns"; // foundation conflict
@import "bower-bourbon/css3/flex-box";
@import "bower-bourbon/css3/font-face";
//@import "bower-bourbon/css3/hyphens"; // 3.2+ only
@import "bower-bourbon/css3/hidpi-media-query";
@import "bower-bourbon/css3/image-rendering";
@import "bower-bourbon/css3/inline-block";
@import "bower-bourbon/css3/keyframes";
@import "bower-bourbon/css3/linear-gradient";
@import "bower-bourbon/css3/perspective";
@import "bower-bourbon/css3/radial-gradient";
@import "bower-bourbon/css3/transform";
@import "bower-bourbon/css3/transition";
@import "bower-bourbon/css3/user-select";
@import "bower-bourbon/css3/placeholder";

// Addons & other mixins
//@import "bower-bourbon/addons/button"; // foundation conflict
//@import "bower-bourbon/addons/clearfix"; // foundation conflict
@import "bower-bourbon/addons/font-family";
@import "bower-bourbon/addons/hide-text";
//@import "bower-bourbon/addons/directional-values"; // 3.2+ only
//@import "bower-bourbon/addons/ellipsis"; // 3.2+ only
@import "bower-bourbon/addons/html5-input-types";
@import "bower-bourbon/addons/position";
@import "bower-bourbon/addons/prefixer";
//@import "bower-bourbon/addons/rem"; // 3.2+ only
@import "bower-bourbon/addons/retina-image";
@import "bower-bourbon/addons/size";
@import "bower-bourbon/addons/timing-functions";
//@import "bower-bourbon/addons/triangle"; // foundation conflict

// Soon to be deprecated Mixins
@import "bower-bourbon/bourbon-deprecated-upcoming";

导入基础目前只是一条线，但您可以对其进行调整以仅从基础中获取您需要的内容：

// external/_foundation5.scss
@import 'foundation/scss/foundation';

Answer 2

如果你想在以后更新 Foundation 没有任何问题，你应该遵循规则：不要更改 Foundation/components 目录中的文件

您需要的所有变量都可以在基础/设置中找到。

app.scss 的一些示例：

@import "bourbon";
@import "settings"; //where you can change all variables
@import "foundation";  //better

设置文件看起来像： https ://github.com/zurb/foundation/blob/master/scss/foundation/_settings.scss