LessCss:带&关键字的多个类选择器

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应用规则.

有人有解决方案吗？

UPDATE

仅供参考 - 我正在为几个不同的独特工作表编译几个.less文件.工作得很好.

SublimeText2插件 - 工作得相当好,并且很好地集成到工作流程中(需要"构建"文件) - 但是无法呈现这样的多个类

SimpLess - 是一个很好的独立我喜欢很多,除了我不断编译错误堆栈的错误 - 没有明确引用错误位置

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

Answer 1

Mixin名称应由单个类名组成,而不是多个名.像这样创建一个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;
}

Answer 2

似乎是编译器问题

如果你按照你最初的想法：

.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{
  .icon;
  .icon-l.legend;
  .icon-white.legend;
  .icon-l.arrow_left;
}

然后假设你给变量分配了一些东西@icon_legend_white，然后在线winless编译器将其编译为以下内容（其中变量设置为“somepath”）：

#something {
  display: inline-block;
  position: relative;
  text-indent: -9999em;
  width: 24px;
  height: 24px;
  background: url("somepath") no-repeat;
  background-position: -128px -32px;
}

因此，如果您的编译器抛出错误，那么它们的编译方式显然存在一些差异。一种解决方案是切换编译器，或调试您正在使用的编译器。

更新

对 winless 编译器的一些进一步实验表明，它仅在项目由类或 id 定义时才起作用（这是可以理解的，因为这就是对 mixins 有效的规定），但它确实有一个错误，因为它会 mixin和 中的一个或两个.icon-l.legend通过.icon-l .legend其中一个的简单 mixin 调用来实现。因此，如果作为 mixin 调用，第二组之间的“空格”（使其成为子选择器）将被忽略。对于该编译器来说这肯定是错误的。另一个在线编译器似乎没有遇到这个错误，但仍然根据您最初的尝试进行编译。