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:

Table of Contents

    .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!