41

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?

4 Answers 4

87

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.

9
  • 2
    This is perfect I had no idea you could pass a property to a mixin but it makes sense now Commented May 31, 2012 at 2:55
  • 2
    Don't just go around adding prefixes willy-nilly. Opera doesn't support calc() at the moment, but when it does, it's fairly likely to do it without prefixes.
    – cimmanon
    Commented May 17, 2013 at 17:09
  • 1
    If you are using Bourbon, there is a calc mixin built right in. Commented Jan 28, 2014 at 2:27
  • 1
    I don't understand why property needs to be escaped as well? I'd also add -moz-calc as value. It's still supported by ~ .6% of users refering to caniuse.com
    – Volker E.
    Commented Jul 23, 2014 at 13:45
  • 1
    @VolkerE.: this behaviour is according to spec - variables in selectors and property names have to use interpolation syntax
    – Oleg
    Commented Jul 23, 2014 at 22:06
10

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));
}
4
  • Does not allow for variables. What about: @include experimental-value(width, calc(100% - ($sidebarWidth + $padding)));? Commented Jul 30, 2014 at 18:41
  • 1
    Haven't tried it, but does this work? @include experimental-value(width, calc(100% - #{$sidebarWidth + $padding})); Commented Aug 1, 2014 at 6:25
  • The shared utility has been deprecated from compass. Commented Sep 27, 2014 at 3:10
  • Indeed it has! That's probably because calc() has hit the mainstream: caniuse.com/#search=calc Commented Sep 29, 2014 at 7:25
4

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);
}
0

Another way to write it:

@mixin calc($prop, $val) {
  @each $pre in -webkit-, -moz-, -o- {
    #{$prop}: $pre + calc(#{$val});
  } 
  #{$prop}: calc(#{$val});
}

.myClass {
  @include calc(width, "25% - 1em");
}

I think this is more elegant way.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.