Prevent Sass from making quotes arround value [duplicate]

Question

I am quiet new to Sass... I want to create some css with percentage values like:

width : 13%;

The value is the result of a sass number operation. Writing this

width : $main-width + "%"

scss code generates this:

width : "13%";

css, what is actually not working because it should be:

width : 13%;

writing

width : $main-width %;

results in

width : 13 "%"

what also leads to a non working css-rule. Is there a way to make Sass print 13% plain, with no quotes?

Answer 1

Think of units in Sass like variables in algebra instead of just concatenating strings.

In algebra: 2x * 3 = 6x

In Sass: 13 * 1% = 13%

Use this approach to do more advanced math. 10px * 3px = 30px*px

But px*px isn't a valid CSS unit so you have to cancel one out by dividing by 1px

30px*px / 1px = 30px

Hope this helps beyond your original question.

Answer 2

unquote("%") does the trick.