Question

昨天我问了一个similar question，因为Compass花了很多时间来观察和编译我的Sass文件。

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

感谢任何帮助。提前谢谢！

Answer 1

如果您希望将来更新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

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';

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

2 个答案: