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; の場合
}