Categories
guides

Less.css: Escape a Less function in favor of CSS3 function

When trying to use a CSS3 function (like min(), calc(), etc) inside a Less (.less) file, you need to escape the native Less function if it has the same name as a CSS function. You can do this using by putting the CSS function in quotes, and prepending that with a ~.

Example using CSS function:

.element {
  width: ~"min(30%, 400px)";
}

Example using CSS that includes reference to Less variable:
note: curly braces around variable name

.element {
  width: ~"calc(100% - @{thingWidth})";
}

src

By bo.

I'm @boyEatsSteak in a lot of places. I have been wanting 🍕 for weeks. I like gadgets and technology and keeping notes and tips for my future self since all I can remember is that I forget things.