12

Scssの2つのカスタムユーティリティ関数を使用して、CSS関連の計算を最適化しようとしています。

EM用の1つ：

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

...そしてパーセンテージについては別のもの：

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

...次にそれらをインラインで呼び出します：

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

ただし、これらはどちらも期待値NemまたはN%文字列を返していません。（これは私の文字列の連結だと思います。つまり、計算の最後に単位宣言を接着しますが、よくわかりません。）

誰かが私が間違っていることに光を当てることができますか？

4

2 に答える 2

18

実際、あなたの問題はミックスインの名前です。これを自分で発見したばかりですが、アンダースコアを使用してミックスインを開始することはできないようです。

これは機能します：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);
}
于 2012-07-29T15:35:27.470 に答える
0

同様に、単位をから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);
}
于 2015-07-01T21:39:55.947 に答える