嵌套规则更少-我可以将级联选择器放在主选择器之前吗？

Question

My selector needs to be:

 .tooltip.right .tooltip-arrow 

So I use the following nested rule:

.tooltip-arrow {

    .tooltip.right {
        left: -(@ttArrowSize - 5);
        margin-top: -@ttArrowSize;
        border-width: @ttArrowSize @ttArrowSize @ttArrowSize 0;
        border-right-color: @ttColor;
    }
}

But after compiling the selector looks like:

.tooltip-arrow .tooltip.right

The main question is if I can indicate LESS to put the "cascaded" selector before the main one. Any workarounds are welcome as well.

Answer 1

You can use the ampersand selector, which refers to the parent selector inside a nested selector.

Interesting Article

So this in LESS

.tooltip-arrow {    
    .tooltip.right & {
            color:red;
    }      
    .tooltip.left & {
            color:blue;
    }
}

compiles to this in CSS

.tooltip.right .tooltip-arrow {
  color: red;
}
.tooltip.left .tooltip-arrow {
  color: blue;
}