Re: @with -- DRY syntax for nesting selectors

On Jan 9, 2012, at 2:24 PM, Marat Tanalin | tanalin.com wrote:

>> #example .foo .bar {
>>   color: blue;
>>   @nest .baz & {
>>     text-decoration: underline;
>>   }
>> }
>> 
>> ~TJ
> 
> Sounds interesting, though looks not quite readable and DRY. We are forced to always add redundant '&' (this could be very annoying in practice) even if all rules are without leading combinators and could be expressed without :this using my proposed syntax.
> 
> BTW, @with/:this could be used with the same result as @nest/& from your example:
> 
>    @with (#example .foo .bar) {
>        :this {color: blue; }
> 
>        @with (.baz :this) {
>            :this {text-decoration: underline; }
>        }
>    }
> 
> or with implicit :this:
> 
>    @with (#example .foo .bar) {
>        {color: blue; }
> 
>        @with (.baz :this) {
>            {text-decoration: underline; }
>        }
>    }

I'd be nice if people writing these sort of selectors could also write what they expand out to, as the whole :this/& concept is not quite natural enough to immediately grok before getting familiar with it. 

As I understand it, your example (which looks much nicer and easier to read in its "implicit" form than either of the other two, though it is an awful lot of curly braces to get lost in), would expand to this:

#example .foo .bar { color: blue; }
.baz #example .foo .bar  { text-decoration: underline; }

Right so far? Then what about this:

   @with (#example .foo .bar) {
       {color: blue; }

       @with (.baz :this) {
           {text-decoration: underline; }

           @with (.qux :this .wibble) {
                {position:absolute;}
           }
       }
   }

Is it this:

#example .foo .bar { color: blue; }
.baz #example .foo .bar  { text-decoration: underline; }
.qux .baz #example .foo .bar .wibble  { position:absolute; }

So that :this means "everything that's been selected so far to get to that level of embedding". Or, something else? 

I think it would be less confusing if there was less of an abundance of curly braces to keep straight (especially if you write the whole thing in one line). How about this:

   @with (#example .foo .bar) [
       {color: blue; }

       @with (.baz :this) [
           {text-decoration: underline; }

           @with (.qux :this .wibble) [
                {position:absolute;}
           ]
       ]
   ]

Then each set of declarations is in its familiar curly braces, but the embedding level is determined by square braces.

Except now I forget whats wrong with just doing this:

   @with (#example .foo .bar) {
       color: blue; 

       @with (.baz :this) {
           text-decoration: underline; 

           @with (.qux :this .wibble) {
                position:absolute;
           }
       }
   }

Received on Tuesday, 10 January 2012 17:54:56 UTC