说 – 拥有一张带有大量“多个”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 – 工作得相当好,并且很好地集成到工作流程中(需要’构建’文件) – 但是无法呈现这样的多个类
解决方法
似乎是编译器问题
如果你采取你最初的想法：
.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似乎没有遭受该错误,但仍然根据您的原始尝试编译.
