Getting Started with Less

Escaping

February 21

Sometimes you need to write CSS code without Less compiling it down.

For example, CSS has a calc() function itself that conflicts with the Less function:

// Valid CSS
.box {
    width: calc(100% - 25px);
}

// But Less Ouputs
.box {
    width: calc(75%);
}

That is definitely what we don't want! So here's how to fix in these weird scenarios:

.box {
    width: calc(~'100% - 25px');
}

// But Less Ouputs
.box {
    width: calc(100% - 25px);
}

This doesn't happen often but it's important to take note of this!