css - 少ない CSS 変数をデバッグする方法

Question

タイトルにあるように、CSS 変数を減らしてデバッグするにはどうすればよいでしょうか。例として。

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

Answer 1

@GeekyMonkeyの回答に基づいて、私はあなたがあなたのより少ないファイルのどこかに置くことができるこの小さな切り抜きを書きました：

.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}";
}