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?

Ayman Safadi · Accepted Answer · 2012-07-29 15:44:08Z

18

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);
}

edited Jul 29, 2012 at 15:44

answered Jul 29, 2012 at 15:35

Ayman Safadi

11.6k1 gold badge30 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

markedup Over a year ago

Thanks Ayman, though that's somewhat annoying. Think I'll just go with pc(x,y) and em(x,y) as prefixing function names with a minus could be misleading for other devs.

Jasmine Hegman Over a year ago

For reference for anyone who wants these, but without string output, just wrap the returns in SASS interpolation syntax, e.g.: @function -px-to-pc($wanted, $parent) { @return #{(( $wanted / $parent ) * 100 ) + '%'}; }

markedup Over a year ago

Thanks, Jasmine, this is the best solution—otherwise Sass seems to dump out the calculation+concatenation as a literal quoted string as the CSS rule value!

Alan Dong · Accepted Answer · 2015-07-01 21:39:55Z

0

Similarly, I wrote this function for converting unit from px to rem.

You can modify accordingly.

$is-pixel: true;
$base-pixel: 16;

@function unit($value) {
  @if $is-pixel == true {
    $value: #{$value}px;
  } @else {
    $value: #{$value/$base-pixel}rem;
  }
  @return $value;
}

Now, one can use as following

.my-class {
  width: unit(60);
  height: unit(50);
}

answered Jul 1, 2015 at 21:39

Alan Dong

4,10542 silver badges35 bronze badges

Collectives™ on Stack Overflow

Writing a Sass/Scss function that returns a string

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related