CODEWITHSUNDEEP
sass
markedup
markedup

Reputation: 1257

Writing a Sass/Scss function that returns a string

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?

Upvotes: 12

Views: 19006

Answers (2)

Alan Dong
Alan Dong

Reputation: 4095

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

Upvotes: 0

Ayman Safadi
Ayman Safadi

Reputation: 11552

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

Upvotes: 18

Related Questions