0

我正在运行一个Symfony2为 api 和后端提供服务的项目；我使用 bower 来安装我的前端依赖项，包括Angularjs和Zurb Foundation. 我们正在使用Assetic——一个 Symfony2 包——来缩小、丑化、预渲染和合并我们的资产。我们还使用由 Assetic 编译的Sass(as )。.sass

我想与 Foundation 合作，_settings.scss并了解 Foundation 需要在我更改变量时重新编译自身。我试过运行compass watch path_to_file，但这并没有更新我的 Foundation 项目。

据我了解，很多人使用Compassor来运行基础gulp。我已经阅读 了 几个 文档，但不确定它与我的特定案例有何关系。一个消息来源建议运行compass init以启动一个项目，并compass watch在我进行更改时更新项目，但这似乎不适用于 Symfony2，但我可能错了。有人有提示吗？

我正在使用这个基金会回购：https ://github.com/zurb/bower-foundation ，但也有这个：https ://github.com/zurb/foundation-apps 。第二个 repo 似乎更适合那些在启动项目时使用 、 或 运行 Foundation 项目gulp的foundation cli人compass init。

4

1 回答 1

0

答案非常简单：

我Assetic用来编译我的 sass。它通常看起来像这样：

{% stylesheets
    "@SiteBundle/Resources/public/vendor/foundation/scss/app.scss"
filter="compass" %}
    <link rel="stylesheet" type="text/css" href="{{ asset_url }}"/>
{% endstylesheets %}

app.scss是我创建的一个文件，因为这似乎是每个人使用基础的方式。app.scss然后导入我想要的基础组件normalize.scss以及_settings.scss. 我不必运行compass watch，因为Assetic已经为我编译。

我可能会将我的app.scss和_settings.scss我的供应商目录移出，以确保在更新基础时我不会重写。但目前app.scss对于任何感兴趣的人来说，这就是我的样子：

@charset "UTF-8";
// Foundation by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source

// Import normalize and settings

@import "normalize.scss";
@import "foundation/settings";

// Make sure the charset is set appropriately

// Behold, here are all the Foundation components.
@import "foundation/components/grid";
// @import "foundation/components/accordion";
@import "foundation/components/alert-boxes";
@import "foundation/components/block-grid";
// @import "foundation/components/breadcrumbs";
@import "foundation/components/button-groups";
@import "foundation/components/buttons";
@import "foundation/components/clearing";
@import "foundation/components/dropdown";
@import "foundation/components/dropdown-buttons";
@import "foundation/components/flex-video";
@import "foundation/components/forms";
@import "foundation/components/icon-bar";
@import "foundation/components/inline-lists";
// @import "foundation/components/joyride";
@import "foundation/components/keystrokes";
@import "foundation/components/labels";
// @import "foundation/components/magellan";
// @import "foundation/components/orbit";
@import "foundation/components/pagination";
@import "foundation/components/panels";
// @import "foundation/components/pricing-tables";
@import "foundation/components/progress-bars";
@import "foundation/components/range-slider";
@import "foundation/components/reveal";
@import "foundation/components/side-nav";
@import "foundation/components/split-buttons";
@import "foundation/components/sub-nav";
@import "foundation/components/switches";
@import "foundation/components/tables";
@import "foundation/components/tabs";
@import "foundation/components/thumbs";
@import "foundation/components/tooltips";
@import "foundation/components/top-bar";
@import "foundation/components/type";
@import "foundation/components/offcanvas";
@import "foundation/components/visibility";
于 2015-01-30T18:39:46.830 回答