0

I'm running a project where Symfony2 serves the api and back-end; I use bower to install my front-end dependencies, including Angularjs and Zurb Foundation. We're using Assetic––a Symfony2 bundle––to minify, uglify, pre-render and combine our assets. We're also using Sass (as .sass), compiled by Assetic.

I want to work with Foundation's _settings.scss and understand that Foundation needs to recompile itself whenever I change a variable. I've tried running compass watch path_to_file but that doesn't update my Foundation project.

As I understand it, a lot of people run foundation using Compass or gulp. I've read through several docs but am unsure how it relates to my particular case. One source suggests running compass init to start a project and that compass watch to update the project when I make changes, but that doesn't seem appropriate to do with Symfony2, but I may be wrong. Anyone got tips?

I'm using this foundation repo: https://github.com/zurb/bower-foundation, but there's also this one: https://github.com/zurb/foundation-apps. The second repo seems more suited for people who are running a Foundation project with gulp, the foundation cli, or by running compass init when starting a project.

Community
  • 1
  • 1
Miguel Valencia
  • 221
  • 3
  • 14

1 Answers1

0

The answer is incredibly simple:

I use Assetic to compile my sass. It typically looks like this:

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

app.scss is a file I created because that seems to be how everyone works with foundation. app.scss then imports the foundation components I want as well as normalize.scss and _settings.scss. I don't have to run compass watch because Assetic is already compiling for me.

I might move my app.scss and _settings.scss out of my vendors directory to ensure I don't write over either when updating foundation. But at the moment here's what my app.scss looks like, for anyone interested:

@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";
Miguel Valencia
  • 221
  • 3
  • 14