Handling the containers of floated elements in HTML/CSS has always
been a real pain. Currently, I add "overflow:auto" (see
http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/)
to the a container with nothing but floated elements. This prevents it
from shrinking down to zero height.
I'm learning SASS now and really enjoying the DRY aspects of it. When
I had a float-container to clear, I immediately thought of an elegant
way to do it with the least amount of code possible. Here's what I
attempted:
=floatme(!side)
float = !side
&
overflow: auto
.teasers
.first
+floatme("left")
.second
+floatme("left")
.third
+floatme("left")
The idea behind this is to:
- Have a standard, reusable method of floating elements. I only have
the float: property here, so it's a bit unnecessary to use the mixin,
but I have the ability to add other properties too (in particular:
width) without repeating it
- *automatically* clear the floats as soon as they're used. In this
case, that means adding overflow: auto to the parent of the floated
element
The first point works wonderfully. However, the second one does not.
It appears that, when & is used in a mixin, the "parent" selector is
the selector that the mixin is applied to. Thus, my overflow gets
applied to ".teasers .first" etc, not ".teasers".
This makes a certain amount of sense given how SASS works. But I'd
really like it if I could get access to the parent-of-the-parent too.
I've tried:
&
&
...and:
& &
...but neither of these work. The former just inserts a second
".teasers .first" with the overflow, and the latter inserts
".teasers .first .teasers .first".
It looks like SASS doesn't currently support what I want to do, so I
guess I'm asking for a new feature request: the ability to access the
grandparent (and ideally any ancestor) of the current selector.
Alternately, if there's a better way to clear the floats that works
with the current SASS, I'll definitely appreciate that.
Thanks,
Craig Walker
SoftCraft Development
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Haml" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to [email protected]
For more options, visit this group at http://groups.google.com/group/haml?hl=en
-~----------~----~----~----~------~----~------~--~---
