css - 如何调试较少的css变量

Question

正如标题所述，我将如何调试更少的 CSS 变量。举个例子。

//style.less
@height: `document.body.clientHeight`;

Answer 1

根据@GeekyMonkey的回答，我写了这个小片段，你可以把它放在你的less文件的某个地方：

.debug(@var) {
  &:after {
    content: "@{var}";
    font-size: 20px;
    background-color: #fff;
    border: 1px solid red;
    padding: 10px;
    border-radius: 5px;
    color: red;
    font-weight: bold;
    position: absolute;
    top: 50%;
    left: 50%;
  }
}

然后只需使用.debug(@someVar)并将其值打印到屏幕上。:-)

Answer 2

您可以通过在 :before 或 :after 伪元素的内容中使用它们来将值输出为文本。

.Panel:after
{
    content: "@{PanelPadding}";
}