LESS mixin 适用于嵌套 DIV

Question

我有一个嵌套的div 结构，如下所示：

<div class="Button" id="StartButton" >
    <div class="buttonIcon" id="startButtonIcon"></div>
    <div class="buttonText" id="startButtonText">Start</div>
</div>

还有几个 LESS mixin 我用来将父 div 格式化为按钮形状，将图标设置为实际图像，将文本设置为特殊格式，如下所示：

.button-base() {
     ... LESS code here
}

.buttonIcon(@image) {
    ... LESS code
}

.buttonText() {
   ... LESS code
}

这是我对 HTML 的 LESS 结构：

#startButton {
    .button-base();

    #startButtonIcon {
            .buttonIcon('img/icon_start_default.png', 'img/icon_start_hover.png');
            }

    #startButtonText {
            .buttonText;
            }
   }

我想做的是在.button-base() LESS mixin 中应用hover 选择器，并让它适当地更改嵌套DIV 的图像和文本。我似乎无法找出在父 Mixin 中使用 & 选择器的正确方法。

我也愿意重组 DIV 组，以便我可以通过 1 个 LESS 混合来控制图标和文本。不过我不确定我会怎么做，因为我也是 HTML、LESS/CSS 等方面的初学者。

感谢任何帮助！

顺便说一句，这是一个 jsFiddle，它显示了我要完成的工作。我知道您可以对 CSS 进行硬编码，但我试图避免这种情况，并使用最佳实践并尽可能使用 LESS 代码实现自动化：http://jsfiddle.net/tLfqzq8c/3/

Answer 1

这就是你想要的：

.Button {
    width: 115px;
    height: 30px;
    border-color: #ececec;
    border-width: 1px;
    border-style: solid;
    text-align: center;
    vertical-align: middle;
    line-height: 30px;
    display: inline-block;
    color: #666666;
    background: #ececec url('http://res1.windows.microsoft.com/resbox/en/6.3/main/89ff52cc-8b6d-4a8e-bae3-5bfca40dcb59_18.png') no-repeat 10%;
}
.Button:hover {
    color: white;
    background-image: url('http://www.phiadariasoft.com/main/images/windows_icon.png');
}

这是html：

<div class="Button" id="StartButton" >
    Start
</div>