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

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 将 "cascaded" 选择器放在主要选择器之前。也欢迎任何解决方法。

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;
}

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

Less nested rules - can i put the cascaded selector before the main selector?

css

nested

less