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

Question

我创建了几个 LESS mixin 来帮助我进行调试。

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

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

 .comment(video-layout, ontop);

这会在我的 CSS 中输出一个“评论”。

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

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

这个想法是，在创建带有断点的响应式设计时，我可以找到我可能在 mixins 中使用的属性来创建我的 css。 （是的，我知道 sourcemap 支持，但不止于此）。

很遗憾，因为-rr-video-layout 无法被浏览器识别，它只是将其划掉了。当然，我仍然可以看到该值，这很有用，但我真的很想看看哪个值实际上对特定断点有效。

有没有办法：

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

Answer 1

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

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