Functions

/.tmp_src/docs/application.css

pe-ceil-decimal()

/.tmp_src/docs/application.css
引数 初期値 備考
$number なし <Number> 切り上げの対象となる実数値
$digits 0 <Integer> 数値を切り上げた結果の桁数
  • Sass の組み込み関数 ceil() の拡張関数。
  • 切り上げた結果の桁数を指定できる。
@function pe-ceil-decimal($number, $digits: 0) {
  ...
}
// 第 1 引数には以下の様に値が直接入るのではなく、何かしらの計算結果が入る想定
.class-name {
  margin: pe-ceil-decimal(1.234em, 2);
}
.class-name {
  margin: 1.24em;
}

pe-color()

/.tmp_src/docs/application.css
引数 初期値 備考
$color-name なし $g-color-palettes に設定したカラー名 -
  • $g-color-palettes に設定したカラー名に対応するカラーコード(16 進数)を返す。
@function pe-color($color-name, $color-tone: base) {
  ...
}
$g-bg-color: pe-color(white);

pe-root-font-size()

/.tmp_src/docs/application.css
引数 初期値 備考
$size $pe-rem-base <Integer>px 理由がない場合は指定なし(初期値のまま)にする
  • ブラウザデフォルトのフォントサイズ(一般的には16px)に対する引数値のパーセンテージを返す。
  • 引数値は、特に理由がない場合は指定なし(初期値のまま)にする。
  • root 要素(html 要素)のフォントサイズにのみ使用可能。
@function pe-root-font-size($size: $pe-rem-base) {
  ...
}
html {
  font-size: pe-root-font-size();
}
html {
  font-size: 62.5%; // $pe-rem-base: 10px; の場合
}
Last update at 2016/09/16 15:55

Styleguide