SASS Calc Interpolation

Question

I have a SASS variable:

$default-padding: 15px

I want to use this to set a CSS width property using the calc function.

I have various calculations to make based on the value of the $default-padding variable. For Example, the width would be 100% - (2 * $default-padding). As there is padding on the left and on the right.

I am trying to set a local variable (using Bourbon's strip-unit method):

$default-padding-left-and-right: #{(strip-unit($default-padding) * 2)}px;

I would expect the result of this variable to be 30px in this use case, and I want to use it in the following rule:

.popup {
    width: calc(100% - #{$default-padding-left-and-right});
}

This doesn't work, the resultant CSS is:

.popup {
    width: calc(100% - strip-unit(15px)px);
}

Any ideas what I'm doing wrong?

Jakob E Jakob E · Accepted Answer · 2017-02-15T12:17:24

Two things:

it seems like the strip-unit function is not found (why the function name is printed out)
you should not interpolate the $default-padding-left-and-right (it turns the variable value into a string) – use multiply instead.

Example :

@function strip-unit($num) { @return $num / ($num * 0 + 1); }

$default-padding: 15px;
$default-padding-left-and-right: strip-unit($default-padding) * 2px;

.popup {
  width: calc(100% - #{$default-padding-left-and-right});
}

Output:

.popup {
  width: calc(100% - 30px);
}

SASS Calc Interpolation

2 Answers