secretformula secretformula - 1 year ago 142
Sass (Sass) Question

Calc Element in Sass CSS

I am working on a sass stylesheet in which I wish to use the

element to dynamically size some content. As the
element has not been standardized, I need to target
, and

Is there a way for me to create a mixin or function that I can pass an expression to so that it will generate the required tags that can then be set as a

Answer Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download