qac-og
Last Updated: December 22, 2016
·
19.89K
· livingston

SASS CSS3 calc mixin

CSS3 calc SASS mixin

@mixin calc($property, $expression) {
  #{$property}: -moz-calc(#{$expression});
  #{$property}: -webkit-calc(#{$expression});
  #{$property}: calc(#{$expression});
}

Usage,

article {
  border: 1px solid red;
  @include calc( width, '100% - 2px')
}

Note: CSS3 calc is supported by all modern desktop browsers, except Opera - http://caniuse.com/calc

4 Responses
Add your response

8162

Thanks for this. I added something to include a default, for those unsupported like Opera, also:

@mixin calc($property, $default, $expression) {
#{$property}: $default;
#{$property}: -webkit-calc(#{$expression});
#{$property}: -moz-calc(#{$expression});
#{$property}: calc(#{$expression});
}

And a little extra info - in order o have the expression include a $var, I did this:
@include calc(width, 98%, "100% - #{$border-width*2}");

over 1 year ago ·
9391

I prefer box-sizing

@mixin box-sizing{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

over 1 year ago ·
13763

Awesome. Thanks for this!

over 1 year ago ·
28405

Another way to write it:

@mixin calc($prop, $val) {
@each $pre in -webkit-, -moz-, -o- {
#{$prop}: $pre + calc(#{$val});
} #{$prop}: calc(#{$val});
}
I think it is more elegant way :)

over 1 year ago ·