I need to set the width of an element that is used in various places in my fluid Susy layout. The parent element is not always the same width, but I want this element to always have the same width relative to the page width.
Example:
In a 12-column grid, a news article sometimes spans 12 columns, sometimes 6. Editors are able to add a <blockquote> in the news article text. I want a blockquote to always be 3 columns wide (relative to the full page), regardless of its context (12 or 6 columns).
Of course if this was a grid with fixed column widths it would be easier, but I'm looking for a fluid, percentage-based solution.
PS. I am willing to use Susy 2 alpha if that makes it easier to solve the problem.
You would do this the same way in Susy 1 or 2, though it's always more fun in 2. :)
The issue isn't really related to anything specific about Susy, it would be a problem in any fluid CSS situation. You can only solve it if you have a hook for knowing which context you are in. At that point, you can solve it from either end. Something like this:
blockquote {
@include span-columns(3);
.narrow & { @include span-columns(3,6); }
}
There really isn't any way to do it without the hook. CSS doesn't have element-queries (and isn't likely to any time soon, for the reasons given in that article).