使用自定义css属性调试LESS css mixins的策略

Question

我已经创建了一些LESS mixins来帮助我调试。

.comment(@name, @comment)
{
    & when (@debugMode = true)
    {
        -rr-@{name}: @comment;
    }
}

然后我在断点中调用它（我有调用每个断点宽度的mixins）。

 .comment(video-layout, ontop);

这会输出评论＆＃39;在我的CSS中。

@media screen and (min-width: 23em) {

    #pnlBladeVideos 
    {
       -rr-video-layout: ontop;
    }
}

我的想法是，在创建带有断点的响应式设计时，我可以找到我可能在mixins中用来创建我的CSS的属性。 （是的，我知道有关源图的支持，但这超出了这个范围。）

不幸的是，因为浏览器无法识别-rr-video-layout，所以它只会将其删除。当然我仍然可以看到值，这很有用，但我真的很想知道哪一个实际上对特定断点有效。

有没有办法：

• 让Chrome识别任意css属性前缀或名称
• 使用一些惰性且无效的css属性
• 设置Chrome扩展程序以识别 - 但实际上忽略了自定义css属性
• 做一些聪明的事情来达到同样的效果吗？

Answer 1

content可能可以解决问题（因为它仅影响::before和::after但仍被视为任何选择器的有效属性（至少通过Chrome））。即：

.comment(@name, @comment) when (@debugMode = true) {
    content: "@{name}: @{comment}";
}