How can I create a calc mixin to pass as an expression to generate tags?

Question

I am working on a sass stylesheet in which I wish to use the calc element to dynamically size some content. As the calc element has not been standardized, I need to target calc(), -moz-calc(), and -webkit-calc().

Is there a way for me to create a mixin or function that I can pass an expression to so that it will generate the required tags that can then be set as a width or height?

Answer 1

It would be a basic mixin with an argument, thankfully the expressions are not browser-specific within the supported scope:

@mixin calc($property, $expression) {   #{$property}: -webkit-calc(#{$expression});   #{$property}: calc(#{$expression}); }  .test {   @include calc(width, "25% - 1em"); } 

Will render as

.test {   width: -webkit-calc(25% - 1em);   width: calc(25% - 1em); } 

You may want to include a "default" value for when calc is not supported.

Answer 2

Compass offers a shared utility to add vendor prefixes for just such an occasion.

@import "compass/css3/shared";  $experimental-support-for-opera: true; // Optional, since it's off by default  .test {   @include experimental-value(width, calc(25% - 1em)); }