Search code examples
csssasscompass

why no calc() mixin in Compass?


I feel like I'm missing something, Compass provides mixins for everything else that requires browser prefixes. I understand that calc() is widely supported in modern browsers but I can't be the only one that wants to maximize compatibility?

Searching the docs returns nothing:
http://compass-style.org/search/?q=calc

Bourbon has a calc() mixin that only adds -webkit- but it's deprecated and I can't seem to find out why?
http://bourbon.io/docs/#calc

Any help would be appreciated, why is there no calc() mixin in Compass?


Solution

  • If your goal is to include more prefixes to support very old browsers, you should be able to just use calc() in your stylesheet (without the use of a mixin) and Compass will prefix it for you. If you're not getting the prefixes that you want, you need to adjust your desired browser support settings to include the older browsers you wish to support.

    Compass Docs - Tuning vendor prefixes: http://compass-style.org/help/documentation/tuning-vendor-prefixes/

    I haven't seen any evidence that Compass ever supported a calc() mixin in the past but if they did, I would assume they removed it due to browser support getting so good for unprefixed native calc(). I'm pretty sure this is why Bourbon removed it from their library.

    Have you considered preprocessing your values instead of using calc() at all? That would truly ensure the most compatibility by avoiding situations where either the browser's support for navtive calc() is buggy or totally non-existent.