Concatenate a number and "%" in sass

Question

I would like to do the following using SASS:

width: #{$percent}%;

Where $percent is a variable containing a number. If $percent is equal to 50, the precompiled CSS would be:

width: 50%;

What syntax should I use?

Answer 1

Multiply by 1%:

$percent: 50

.foo
  width: $percent * 1%

Result:

.foo {
  width: 50%;
}

Answer 2

If anyone is looking answer for SCSS below code will work perfectly, just use css calc.

$percent: 50

.foo{
   width: calc(#{$percent} * 1%)
 }