Sass add % and em

Question

I have a margin that's defined in em.

I want to do

width: 100% + 3em;

but the units won't play nice.

In my local development environment, I got it to work with interpolation like so

width: #{100%} + #{$code-padding-h};

But when I try to precompile, the precompiling fails with this error

Sass::UnitConversionError: Incompatible units: 'em' and '%'

Answer 1

You can do this trick with the calc method in your css:

width: calc(100% + 3em);