CODEWITHSUNDEEP
cssless
TonyTakeshi
TonyTakeshi

Reputation: 5929

How to debug less css variables

As the title stated, how would I debug less css variables. For an example.

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

Upvotes: 5

Views: 5104

Answers (2)

Joshua Muheim
Joshua Muheim

Reputation: 13195

Based on @GeekyMonkey's answer, I wrote this little snipped you can put somewhere in your less file:

.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 to the screen. :-)

Upvotes: 10

GeekyMonkey
GeekyMonkey

Reputation: 12974

You can output values as text by using them in a :before or :after psuedo-element's content.

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

Upvotes: 6

Related Questions