I like the idea, but it's pretty complicated to get it right. Sass will need
a much deeper understanding of the selector structure, because I think the
desired behavior here is the nth parent targeted *element* not the nth
parent selector in the sass selector tree.
The "&" operator is quite simple and future proof because it's the entire
selector context.
For example, In Craig's usecase:
.teasers
.first
+floatme("left")
Should also work the same when expressed as:
.teasers .first
+floatme("left")
Sibling selectors (a+b, a-b) will also require some special handling because
they target the same level in the DOM:
.container .teasers + table .first
float: right
#{parent(2)}
overflow: visible
Should generate:
.container .teasers + table .first { float: right; }
.container { overflow: visible; }
There might be other special cases that I didn't think of off the top of my
head.
Chris
On Sat, Oct 10, 2009 at 11:13 AM, Nathan Weizenbaum <[email protected]>wrote:
> This is a cool idea. I'll consider adding a function for this - something
> like parent(n) - that will return the name of the nth parent selector.
>
>
> On Sat, Oct 10, 2009 at 10:57 AM, Craig <[email protected]> wrote:
>
>>
>> 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
-~----------~----~----~----~------~----~------~--~---
