search

Compass / compass

Compass is no longer actively maintained. Compass is a Stylesheet Authoring Environment that makes your website design simpler to implement and easier to maintain.
http://compass-style.org
Other
6.73k stars 1.18k forks source link

Global variable clash with new typography module #494

Closed jlong closed 12 years ago

jlong commented 13 years ago

While upgrading a project today I had trouble with the new typography module because I had defined $base-font-size as 95% and imported all of Compass:

https://github.com/radiant/radiant-prototype/blob/master/stylesheets/admin/_base.sass

I ended up having to import utilities and css3 separately in order to use this variable name. (I'm not using the typography module.)

The problem was caused because of this line:

$base-rhythm-unit: $base-line-height / $base-font-size * $font-unit;

https://github.com/chriseppstein/compass/blob/stable/frameworks/compass/stylesheets/compass/typography/_vertical_rhythm.scss#L25

Which assumes that $base-font-size is in pixels. I couldn't figure out an easy way to solve this.

chriseppstein commented 13 years ago

Can you please provide a small example that demonstrates the problem?

jlong commented 13 years ago

Yup:

$base-font-size: 95%
@import compass
MarioRicalde commented 13 years ago

This is why I suggest that you take the cascading approach:

Include all your dependencies on the top, compass should be always the highest on the chain of includes:

Example: https://github.com/kuroir/Survival-Kit/blob/master/src/stylesheets/app.scss

chriseppstein commented 12 years ago

I can't think of a way to solve this issue in compass really. I think namespacing is best handled by a future Sass feature and so in the meantime, judicious handling of import order and selective importing is the best solution.