conflict with compass typography: % vs px

[thomasritz]

upgraded from 4.0.5 to 4.0.8.

Syntax error: Incompatible units: '%' and 'px'.
on line 36 of .../gems/compass-0.12.2/frameworks/compass/stylesheets/compass/typography/_vertical_rhythm.scss
from line 4 of .../gems/compass-0.12.2/frameworks/compass/stylesheets/compass/_typography.scss
from line 2 of .../gems/compass-0.12.2/frameworks/compass/stylesheets/_compass.scss
from line 3 of .../source/stylesheets/app.css.scss

The compass code in question seems to be https://github.com/chriseppstein/compass/blob/stable/frameworks/compass/stylesheets/compass/typography/_vertical_rhythm.scss#L36

It seems that _foundation-global.scss introduced $base-font-size: 100% !default; which overrides compass' value of 16px.

It helps to either set the $base-line-height to anything with a % value or to define

$base-font-size: 16px;

prior to importing foundation/foundation-global or to import compass modules individually (and avoid the typography module).

What would you recommend for a working setup?

[jacmoe]

Something is wrong. Foundation 4 doesn't use compass at all. :)

edit Oh, I see what you mean: you are using the typography module from Compass, and Foundation conflicts with it. /edit

[thomasritz]

I'm using compass for convenience to use some mixins defined there. My issue report is by no means an accusation. Sometimes such problems as reported are just a mistake, sometimes incompatibilities are by design. I want to know what would be the correct way of handle this issue. Maybe this knowledge is also of some use to others.

[jacmoe]

I am planning on doing the same thing. So it's going to be useful to me. :) Sass could need some namespace functionality.

[ncuesta]

:+1: This worked for me by adding it before @importing compass.

[Veraxus]

Considering that Compass used to be a Foundation dependency, this should probably be fixed in Foundation by defining $base-line-height: 100%; in the Frameworks built-in default settings.

The easiest solution for now is to simply add $base-line-height: 100%; to your _settings.scss and set up your app.scss like so:

// Global Foundation Settings
@import "settings";

// Comment out this import if you are customizing you imports below
@import "foundation";

// Get compass mixins
@import "compass";

// Load our custom site styles
@import "mystuff";

So long as $base-line-height is defined as a percentage BEFORE compass is loaded, there are no problems.

[richlove1]

Guys...I'm just kind of tagging on the end of this discussion.

With Foundation 3 I was using many compass mixins (but don't remember explicitly importing Compass), was Compass built in with Foundation 3 by default?

I see there are some issues with Compass mixins with Foundation 4. Is Foundation 4 designed to be used with out Compass or can we just import Compass as shown in the code below to access Compass mixins? I don't understand why Zurb didn't test compatibility with Compass?

[Veraxus]

@richlove1 According to the docs, Foundation 4 is designed to have fewer dependancies... which means Compass is no longer required for the SCSS version of the framework. It also means that there might be a few conflicts since F3 was explicitly built for use with Compass.

[richlove1]

Great, thanks for the feedback, I think it would be better if it were made a bit clearer in the docs for people coming from Foundation 3 (unless I missed that bit)

I assume this means that you can still use Compass and Compass mixins with Foundation 4 if you'd like to?

[Veraxus]

@richlove1 Yeah, you can still use it. The issue in this thread is the only one I've come across... as far as Compass is concerned, anyway (although not Compass related: the Top Bar component is Trouble with a capital T).

[richlove1]

:) OK.... I did import Compass successfully after applying the fix suggested in this thread..Thanks for the feedback

[Devalchemist]

Any word on whether or not this as been addressed by Foundation yet? This is killing me.