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 standa

Answer 1

Using calc can be accomplised pretty easily using the unquote feature:

$variable: 100%
height: $variable //for browsers that don't support the calc function  
height:unquote("-moz-calc(")$variable unquote("+ 44px)")
height:unquote("-o-calc(")$variable unquote("+ 44px)")
height:unquote("-webkit-calc(")$variable unquote("+ 44px)")   
height:unquote("calc(")$variable unquote("+ 44px)")

will render as:

height: 100%;
height: -moz-calc( 100% + 44px);
height: -o-calc( 100% + 44px);
height: -webkit-calc( 100% + 44px);
height: calc( 100% + 44px);

You can also try creating the mixin as suggested above, but I do mine slightly different:

$var1: 1
$var2: $var1 * 100%
@mixin calc($property, $variable, $operation, $value, $fallback)
 #{$property}: $fallback //for browsers that don't support calc function
 #{$property}: -mox-calc(#{$variable} #{$operation} #{$value})
 #{$property}: -o-calc(#{$variable} #{$operation} #{$value})
 #{$property}: -webkit-calc(#{$variable} #{$operation} #{$value})
 #{$property}: calc(#{$variable} #{$operation} #{$value})

.item     
 @include calc(height, $var1 / $var2, "+", 44px, $var1 / $var2 - 2%)

will render as:

.item {
height: 98%;
height: -mox-calc(100% + 44px);
height: -o-calc(100% + 44px);
height: -webkit-calc(100% + 44px);
height: calc(100% + 44px);
}