Writing a Sass/Scss function that returns a string

Question

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?

Answer 1

Actually, your problem is the name of the mixin. I just discovered this myself, but apparently you can't start a mixin with an underscore.

This works: http://jsfiddle.net/B94p3/

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

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

p {
    font-size: -em(40,16);
}