Escaping in Less
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!