Writing a Sass/Scss function that returns a string

Viewed 17478

I'm trying to optimise CSS-related calculations using two custom utility functions in Scss.

One for EMs:

@function _em($wanted, $inherited) {
  @return ($wanted / $inherited) + 'em';
}

...and another for percentages:

@function _pc($wanted, $parent) {
  @return (($wanted / $parent) * 100) + '%';
}

...then calling them inline:

body {
  margin: _pc(40,1024);
  font-size: _em(20,16);
  line-height: _em(26,20);
}

Neither of these are returning the expected Nem or N% string, however. (I think it's my string concatenation - i.e. gluing the unit declarative on the end of the calculation - but I'm not sure.)

Can anyone shed any light on what I'm doing wrong?

2 Answers
Related