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 仅供参考 – SublimeText2 plugin – 工作得相当好,并且很好地集成到工作流程中(需要’构建’文件) – 但是无法呈现这样的多个类 SimpLess – 是一个很好的独立我喜欢很多,除了我不断编译错误堆栈的错误 – 没有明确引用错误位置 WinLess – 设法完成我的所有编译需求,以及成功编译这样的多个类.此外 – 它的错误报告非常具体.让它成为赢家. 解决方法
似乎是编译器问题
如果你采取你最初的想法： .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似乎没有遭受该错误,但仍然根据您的原始尝试编译. （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |