Scss how to integrate vendor prefixes for calc function
I'm tired of writing all the vendor prefixes for a function calc
every time I use it:
width: calc(100px - 50px);
width: -o-calc(100px - 50px);
width: -moz-calc(100px - 50px);
width: -webkit-calc(100px - 50px);
What I usually do is create mixin
in sass
that integrates the vendor prefixes (this example is for box-shadow
):
@mixin box-shadow($args...) { -webkit-box-shadow: $args; -moz-box-shadow: $args; box-shadow: $args; }
Is there a way to write a similar one for a function calc
? (I didn't succeed)
source to share
This may not be a direct answer to your question, but rather a suggestion that you no longer need to add vendor prefixes for calc
. As far as IE is concerned, there is no question about the vendor prefix.
Other browsers are calc
now well supported. For more reference, you can check out CanIUse
- Firefox supports
calc
since version 4 (current version is 57) - Chrome supports
calc
since version 19 (current version is 62) - Opera supports
calc
from version 15 (current version is 48)
It is also supported in Internet Explorer version 9. So I don't think you need to use vendor prefixes as it doesn't matter at all here.
Decision
I came up with this
$props: ("width": "100px - 50px", "height": "100px - 20px");
@mixin calc($props) {
$vendor-prefixes: ("moz", "o", "webkit");
@each $prop, $i in $props {
@each $prefix in $vendor-prefixes {
#{$prop}: -#{$prefix}-calc(#{$i});
}
#{$prop}: calc(#{$i});
}
}
body {
@include calc($props);
}
You can try your solution at SassMeister
What it does here is using the SASS list function where it is like an associative array. You create arrays of your properties and feed them to the mixin and it will generate a vendor-prefixed version of the same.
Note that I have placed the unprefixed version at the end of the loop, as it is recommended to put the unprefixed version after the prefixed versions.
For more information on SASS List
source to share
The following is pulled from a much larger project for declarative rather than automatic vendor prefixes of properties or values css
...
@mixin calc($property, $value, $fallback: false) {
@if $fallback {
#{$property}: #{$fallback};
} @else {
@warn "Consider setting a fallback for #{$property}";
}
@include render-vendor-prefixes(
$property: $property,
$value: calc(#{$value}),
$vendor-list: (
-webkit, // Old - Chrome 19-25, Safari 6
-moz // Old - Firefox 4-15
),
$prefix: value,
);
}
Note that the above depends on two other files
scss
that can be found in the repository directory .lib
Usage example
@import '_scss/modules/vendor-prefixes/lib/map-vendor-prefixes.scss';
@import '_scss/modules/vendor-prefixes/lib/render-vendor-prefixes.scss';
@import '_scss/modules/vendor-prefixes/calc.scss';
.something {
@include calc(
$property: width,
$value: 100% - 40px,
$fallback: 85%
);
}
Note that the above
@include
can be wrapped in one line and expanded for readability only.
Output example ...
.something {
width: 85%;
width: -webkit-calc(100% - 40px);
width: -moz-calc(100% - 40px);
width: calc(100% - 40px);
}
While browser support has gotten better for calc()
in css
there are some that are not supported, so the above shows how to install @mixin
value
property
pare in@mixin
source to share