Geek asks and answers

How to debug fewer css variables

As the title says, how do I debug less css variables. For instance.

//style.less
@height: `document.body.clientHeight`;
+3
source share
2 answers

Based on @GeekyMonkey's answer, I wrote this little shorthand, which you can put somewhere in your file 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%;
  }
}

Then just use .debug(@someVar)and get its value printed on the screen. :-)

+8
source

You can display the values ​​as text, using them in: before or: after the contents of the pseudo-element.

.Panel:after
{
    content: "@{PanelPadding}";
}
+6
source

More articles:


All Articles