Question

Say - 拥有一张包含大量“多个”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;
}

这只会引发错误。

我“导致相信”那个“＆amp;”运营商可以应用如下规则：

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

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

任何人都有解决方案吗？

更新

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

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

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分配了一些内容，然后the online winless compiler将其编译为以下内容（变量设置为“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来说是有效的），但它确实有一个bug它将通过一个简单的mixin调用混合.icon-l.legend和.icon-l .legend中的一个或两个。因此，如果调用mixin，则忽略第二组（使其成为子选择器）之间的“空格”。这对于该编译器来说当然是错误的。 Another online compiler似乎没有遭受这个错误，但仍然根据你原来的尝试进行编译。

LessCss：带有＆amp;的多个类选择器关键词

2 个答案:

似乎是编译器问题