分类导航

HTML 发布时间：2022-04-14 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了html – LessCss：带&keyword的多个类选择器，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

说 – 拥有一张带有大量“多个”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>

当我有权访问标记时,这可以正常工作,但是我很难将这些规则应用于给定元素：

这是我期望的工作：

#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 plugin – 工作得相当好,并且很好地集成到工作流程中(需要’构建’文件) – 但是无法呈现这样的多个类

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

@L_772_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来说是有效的),但它确实有一个错误,它会混合通过简单的mixin调用任一个的.icon-l.legend和.icon-l .legend中的一个或两个.因此,如果调用mixin,则忽略第二组(使其成为子选择器)之间的“空格”.这对编译器来说当然是错误的. Another online compiler似乎没有遭受该错误,但仍然根据您的原始尝试编译.