Написание функции Sass/Scss, которая возвращает строку

Я пытаюсь оптимизировать вычисления, связанные с CSS, используя две пользовательские служебные функции в Scss.

Один для EM:

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

... и другой для процентов:

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

... затем называя их inline:

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

Однако ни одно из них не возвращает ожидаемую строку Nem или N%. (Я думаю, что это моя конкатенация строк, т.е. Склеивание декларативной единицы в конце вычисления, но я не уверен.)

Может ли кто-нибудь пролить свет на то, что я делаю неправильно?

Ответ 1

Собственно, ваша проблема - это имя mixin. Я только что открыл это сам, но, видимо, вы не можете запустить mixin с подчеркиванием.

Это работает: 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);
}

Ответ 2

Аналогично, я написал эту функцию для преобразования единицы из px в rem.

Вы можете соответствующим образом изменить.

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

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

Теперь можно использовать следующие

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