html - LessCSS : multiple class selectors with & keyword

Question

说 - 有一个带有大量“多个”CSS 规则的 .less 工作表来管理图标。像这样:

.icon { display:inline-block; position:relative; text-indent:-9999em;}
.icon-l.legend { width:24px; height:24px;}
.icon-white.legend{ background:url(@icon_legend_white) no-repeat;}
.icon-l.arrow_left{background-position: -128px -32px;}

并应用这样的规则:

<i class="icon icon-l icon-color legend arrow_left"></i>

正如人们所期望的那样，当我可以访问标记时，这工作正常，但我很难通过 less 将这些规则应用到给定元素:

这是我期望的工作:

#something{
  .icon;
  .icon-l.legend;
  .icon-white.legend;
  .icon-l.arrow_left;
}

这只会引发错误。

我“相信”“&”运算符可以像这样应用规则:

#something{
 .icon;
 .icon-l{&.legend{}};
 .icon-white{&.legend{}};
 .icon-l{&.arrow_left{}};
}

这不会引发任何错误，但只会应用 .icon 的规则。

谁有解决办法？

更新

仅供引用 -我正在为许多不同的独特工作表编译几个 .less 文件。效果非常好。

SublimeText2 plugin - 工作得相当好，并且很好地集成到工作流程中(需要“构建”文件) - 但无法像这样呈现多个类

SimpLess - 是一个很好的独立软件，我非常喜欢，除了我在编译我的 less 堆栈时不断出错 - 没有明确指出错误位置

WinLess - 设法完成我所有的编译需求，并像这样成功编译多个类。此外 - 它的错误报告非常具体。让它成为赢家。

Answer 1

Mixin 名称应该由单个类名组成，而不是多个。像这样创建一个混入:

.icon() {
    display: inline-block;
    position: relative;
    text-indent: -9999em;

    &.icon-l.legend {
        width: 24px;
        height: 24px;
    }

    &.icon-white.legend {
        background: url(@icon_legend_white) no-repeat;
    }

    &.icon-l.arrow_left {
        background-position: -128px -32px;
    }
}

然后这样使用它:

#something {
    /* "Injecting" .icon mixin into #something */
    .icon;
}