Scss how to integrate the vendor prefixes for the calc function

user_1058398 0
Viewed 696

I am tired of writing all the vendor prefixes for the calc function everytime I am using 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 to create a mixin in sass which does integrate the vendor prefixes (that example is for box-shadow) :

@mixin box-shadow($args...) {
  -webkit-box-shadow: $args;
  -moz-box-shadow: $args;
  box-shadow: $args;
}

Is there any way to write a similar one for the calc function ? (I didn't manage to do it)

sass css
2 Answers

The following is pulled from a much larger project for declarative instead of automatic vendor prefixes of css properties or values...

@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 the above depends upon two other scss files that can be found in the repository's lib directory.

Example usage

@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 the above @include could be squashed into a single line, and is expanded just for easier reading.

Example output...

.something {
  width: 85%;
  width: -webkit-calc(100% - 40px);
  width: -moz-calc(100% - 40px);
  width: calc(100% - 40px);
}

While browser support has gotten better for the calc() within css there still be some that it's not supported, thus the above shows how to set a fallback property value pare within a @mixin

user_26321070
Related