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

Question

我的选择器必须是：

 .tooltip.right .tooltip-arrow 

所以我使用以下嵌套规则：

.tooltip-arrow {

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

但是在编译选择器之后看起来像：

.tooltip-arrow .tooltip.right

主要问题是我是否可以指示将“级联”选择器放在主要选择器之前。任何变通办法都是受欢迎的。

Answer 1

您可以使用＆符号选择器，它引用嵌套选择器中的父选择器。

Interesting Article

所以这在LESS

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

在CSS

中编译

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