Trouble with variables in CSS3 calc() statement

[CodingFu]

Please consider the following SCSS code

$sidebar-width: 300px;
.main {
  width: calc(100% - $sidebar-width);
}

that compiles into the following incorrect CSS...

.main {
  width: calc(100% - $sidebar-width);
}

whereas the expected result is:

.main {
  width: calc(100% - 300px);
}

---

$ sass --version
Sass 3.2.12 (Media Mark)

[10xLaCroixDrinker]

You need to escape the variable within your parens

.main {
  width: calc(100% - #{$sidebar-width});
}

That should return your expected result.

[CodingFu]

Thanks a lot