9

说 - 有一个 .less 表，其中包含大量“多个”css 规则来管理图标。像这样：

.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 插件- 工作得相当好，并且很好地集成到工作流程中（需要“构建”文件） - 但无法像这样渲染多个类

SimpLess - 是我非常喜欢的一个不错的独立版本，除了我在编译更少的堆栈时不断收到错误 - 没有明确引用错误位置

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

4

2 回答 2

12

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;
}
于 2012-11-04T00:15:27.740 回答
4

似乎是编译器问题

如果您采用您最初的想法：

.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 有效），但它确实有一个错误，即它会混合两者之一或两者，.icon-l.legend并.icon-l .legend通过对任一者的简单混入调用。因此，如果将第二组（使其成为子选择器）称为 mixin，则将忽略第二组之间的“空格”。对于那个编译器来说，这肯定是错误的。另一个在线编译器似乎没有受到该错误的影响，但仍然根据您的原始尝试进行编译。

于 2012-11-05T17:39:17.067 回答