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

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

主要问题是我是否可以指示 LESS 将“级联”选择器放在主选择器之前。也欢迎任何解决方法。

Answer 1

您可以使用＆符号选择器，它指的是嵌套选择器内的父选择器。

有趣的文章

所以这在更少

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

在 CSS 中编译为这个

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