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

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

Say Thanks
Respond

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
B096fdd882f826178a7eb8c56e1a1aa5

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
9d7b60d6955aac9bf06bf0e00850d96d normal

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 :)

11 months ago ·