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
Written by Livingston Samuel
Related protips
4 Responses
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}");
I prefer box-sizing
@mixin box-sizing{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Awesome. Thanks for this!
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 :)
