Bug of Advanced Usage of &

[githubkevin]

if we got

.grandparent { 
  .child, .sibling { 
    .parent & {
       color: black; 
    }
   }
 }

will output :

.parent .grandparent .child,
.parent .grandparent .sibling {  color: black; }

instead of :

grandparent .parent  .child,
grandparent .parent  .sibling {  color: black; }

which means it doesn't work for more then 2 nested layers.

[matthew-dean]

The output is correct and is as designed.

The first layer is:
.grandparent .child, .grandparent .sibling

If I add .parent &, the & concatenates with the inherited selector, creating:
.parent .grandparent .child, .parent .grandparent .sibling

If you wanted
.grandparent .parent .child, .grandparent .parent .sibling

You need to write & .parent { } in the inner selector.

UPDATE:
Sorry, my example was wrong. If you want .parent in the MIDDLE, it needs to be written this way:

.grandparent {
  & .parent {
    .child, .sibling { 
      color: black; 
    }
  }
}

[githubkevin]

why the .grandparent .child is the first layer? should it be just .grandparent?

like

.grandparent { // first layer? 
  .child { // second layer? 
    .parent & {  // third layer? 
    }
  }
}

and also i tried your suggestion(& .parent { } in the inner selector ), it output

.grandparent .child .parent,
.grandparent .sibling .parent{}

still not what i want

[lukeapage]

imagine if there were 4 layers.. what then?

The main use cases for putting & last is to set global selectors.. this is used alot, so we can't change it. why do you want to insert a selector up one layer? Please can you give us your use-case and we'll see if there is a better way to do it or a feature request that matches it.

[Soviut]

I understand the desire to do an "immediate parent" selector. Sadly, I have no concrete examples at the moment, though I've run into the situation several times. So don't throw this out immediately. I wish I could contribute more but until I can dig up some examples I've run into, this is essentially just a +1 on my part.

[matthew-dean]

Yep, and I apologize, my example was wrong.

However, the issue as stated was that the output was wrong, which it isn't. I didn't understand that this was about inserting a selector in the middle. You're right that this question has come up more than once. Unfortunately, all the suggestions for solving it, in patterns and syntax, have been problematic, which is why it's sat around.

But, in short, the issue was: This is a bug, which it isn't, which is why I closed it. There are separate issues asking for a parent selector as a feature.

[githubkevin]

Hi @agatronic, @Soviut, @MatthewDL

I am working on a notification flip effect at the moment.
The markup is

<div id="notifications">
  <ul class="notifications-summary">
    <!-- Showing notifications summary, like how many notifications you got -->
    <li class="summary front">summary</li> 
    <!-- does not exist when initialised. append transient notification here and will flip with the summary bar above -->
    <li class="transient-notification back"></li> 
  </ul>

  <ul class="notification-list">
    ...some non-transient notifications
    <li>1</li>
    <li>2</li>
    ...
  </ul>
</div>

The less is

#notifications {
  /* some rules */
  ...
  .notifications-summary{
    /* some rules */
    ....
    .front {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 100;
        width: 100%;
        /* flip along X axis */
        .flipX(0deg);
        /* mixins and animations */
        .transform-style(preserve-3d);
        .backface(hidden);
        .animation(.4s);
    }
    .back {
        position: absolute;
        top:0;
        left:0;
        z-index: 95;
        .flipX(-180deg);
        .backface(hidden);
        .animation(.4s);
    }
    .flipped .front {
        .flipX(180deg); /* flip 180 degrees along X axis */
    }

    .flipped .back {
        z-index: 105;
        .flipX(0deg); /* flip the back face to the original position along X axis. */
    }
  }
}

The idea is that notification-summary bar is the front face, and any transient notification is the back face. Using commtd technique to push transient notification to the front end once it generated. The new transient notification will be appended to the ul.notifications-summary and add class .flipped to ul.notifications-summary so that it will flip the front face an back face.

My question is

The above less is more like less + css way, so can I rewrite this part

    .flipped .front {
        .flipX(180deg); /* flip 180 degrees along X axis */
    }

    .flipped .back {
        z-index: 105;
        .flipX(0deg); /* flip the back face to the original position along X axis. */
    }

so that we can have

#notifications {
  .notifications-summary{
    .front {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 100;
        width: 100%;
        /* flip along X axis */
        .flipX(0deg);
        /* mixins and animations */
        .transform-style(preserve-3d);
        .backface(hidden);
        .animation(.4s);
        .flipped & {
           .flipX(180deg); /* flip 180 degrees along X axis */
        }
    }
    .back {
        position: absolute;
        top:0;
        left:0;
        z-index: 95;
        .flipX(-180deg);
        .backface(hidden);
        .animation(.4s);
        .flipped & {
           z-index: 105;
           .flipX(0deg); /* flip the back face to the original position along X axis. */
        }
    }
  }
}

This is simply just insert .flipped before .back and .font, so that it can maintain the less structure. I know I can just bring .front and .back out as follows:

#notifications {
  /* some rules */
  ...
  .notifications-summary{
    /* some rules */
    ....
  }
}

.front {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    width: 100%;
    /* flip along X axis */
    .flipX(0deg);
    /* mixins and animations */
    .transform-style(preserve-3d);
    .backface(hidden);
    .animation(.4s);
    .flipped & {
       .flipX(180deg); /* flip 180 degrees along X axis */
    }
}
.back {
    position: absolute;
    top:0;
    left:0;
    z-index: 95;
    .flipX(-180deg);
    .backface(hidden);
    .animation(.4s);
    .flipped & {
       z-index: 105;
       .flipX(0deg); /* flip the back face to the original position along X axis. */
    }
}

But this will loss the structure besides .front and .back is not for reuse.
Any better idea?

[lukeapage]

I wonder if something like

.flipped &1

where the 1 is the number of inheritance levels to grab (CSS wise space seperated values, not less wise). Is this a breaking change though? node types can't begin with a number, so it seems to me like it might not be.

[Soviut]

Not to complicate things too much but CSS syntax allows for brackets so &(x) might be possible. Arguments for and against are welcome.

[lukeapage]

Interestingly @MatthewDL suggested the same syntax separately and I didn't notice, over on #1075
Can we move discussion there so it is in the same place.

[matthew-dean]

Coolz, we did some kind of mind link. ^_^