CODEWITHSUNDEEP
csssass
Scipion
Scipion

Reputation: 11888

Scss how to integrate the vendor prefixes for the calc function

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)

Upvotes: 3

Views: 868

Answers (2)

S0AndS0
S0AndS0

Reputation: 920

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

Upvotes: 0

Mr. Alien
Mr. Alien

Reputation: 157334

This may not be a direct answer to your question but rather a suggestion that you don't need to add vendor prefixes for calc anymore. As far as IE goes, there is no question of the vendor prefix.

About the other browsers, calc is now well supported. For further reference, you can check CanIUse

  • Firefox supports calc from version 4 (current version is 57)
  • Chrome supports calc from 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's completely irrelevant here.

Solution

I've 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 out my solution at SassMeister

Here, what am doing is using SASS list feature where it's like an associative array. You build arrays of your properties and feed it to the mixin and it will generate the vendor prefixed version for the same as well.

Note that I've placed non prefixed version at the end of the loop, as it is recommended to place non prefixed versions after prefixed versions.

For more info on SASS List

Upvotes: 1

Related Questions