如何調試較少的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

可以通過在psuedo-element的內容之前或之後使用它們來輸出值作爲文本。

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