더 적은 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}"; 
}