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

Question

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

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

任何帮助，不胜感激。提前感谢！

Answer 1

如果你想在将来毫无问题地更新基金会，你应该遵循规则：不要更改基金会/组件目录中的文件

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

应用程序.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

Answer 2

我按如下方式排列样式以确保清晰的分离：

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

我上面的外部文件夹不包含供应商 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';