How can I create a calc mixin to pass as an expression to generate tags?

It would be a basic mixin with an argument, thankfully the expressions are not browser-specific within the supported scope:

@mixin calc($property, $expression) {
  #{$property}: -webkit-calc(#{$expression});
  #{$property}: calc(#{$expression});
}

.test {
  @include calc(width, "25% - 1em");
}

Will render as

.test {
  width: -webkit-calc(25% - 1em);
  width: calc(25% - 1em);
}

You may want to include a “default” value for when calc is not supported.

Leave a Comment

Hata!: SQLSTATE[HY000] [1045] Access denied for user 'divattrend_liink'@'localhost' (using password: YES)