像这样的东西:
.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似乎没有遭受该错误,但仍然根据您的原始尝试编译.
原文地址:https://www.jb51.cc/html/227677.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。