数値関数の概要
Sass の数値関数の概要では、数値に対する一連の関数関数が提供されています。
percentage($value): 単位のない数値をパーセント値に変換します。 round($value): 値を四捨五入して最も近い整数に変換します。 ceil($value): それより大きい小数を次の整数に変換します。 : 数値の小数部分を削除します。
; percentage() 関数は主に、単位のない数値をパーセンテージ形式に変換します。 すごい コンパイルされた CSS:
1 | >> percentage(.2)20%>> percentage(2px / 10px)20%>> percentage(2em / 10em)20%
|
ログイン後にコピー
変換された値は単位付きの値であるため、コンパイル時にエラー メッセージが報告されます。 数値関数-round() 関数
round() 関数は、 数値を最も近い整数に四捨五入することができます
:
1 | <strong>1 .footer{2 width:percentage(.2)3 }</strong>
|
ログイン後にコピー
1 | 1 .footer{2 width:20%;3 }
|
ログイン後にコピー
コンパイルされた CSS :
すごい
単位付きの任意の値をround()関数で運ぶことができます。
number関数-CEIL()
それ自体よりも大きい 1.つまり、
は、を破棄せずに計算のみを実行します:
1 | >> round (12.3)12>> round (12.5)13>> round (1.49999)1>> round (2.0)2>> round (20%)20%>> round (2.2%)2%>> round (3.9em)4em>> round (2.3px)2px>> round (2px / 3px)1>> round (1px / 3px)0
|
ログイン後にコピー
1 | <strong>1 .footer{2 width: round (12.3px);3 }</strong>
|
ログイン後にコピー
コンパイルされたCSS:
1 | 1 .footer{2 width:12px;3 }
|
ログイン後にコピー
ログイン後にコピー
数値関数-floor() 関数
床() 関数は、ceil() 関数のちょうど逆です。その主な機能は、桁上げを行わずに数値の小数部分を削除することです。つまり、
は計算ではなく丸めのみを実行します
:
1 | <strong>>> ceil (2.0)2>> ceil (2.1)3>> ceil (2.6)3>> ceil (2.3%)3%>> ceil (2.3px)3px>> ceil (2.5px)3px>> ceil (2px / 3px)1</strong>
|
ログイン後にコピー
1 | 1 .footer {2 width: ceil (12.3px);3 }
|
ログイン後にコピー
コンパイルされた CSS:
1 | <strong>1 .footer{2 width:13px;3 }</strong>
|
ログイン後にコピー
Number function -abs() 関数
abs()関数は数値の絶対値を返します。
1 | >> floor (2.1)2>> floor (2.5)2>> floor (3.5%)3%>> floor (10.2px)10px>> floor (10.8em)10em>> floor (2px / 10px)0
|
ログイン後にコピー
1 | 1 .footer {2 width: floor (12.3px);3 }
|
ログイン後にコピー
コンパイル済み CSS:
1 | 1 .footer{2 width:12px;3 }
|
ログイン後にコピー
ログイン後にコピー
数値関数 - min() 関数、max() 関数 min() 関数
min()この関数の主な機能は、複数の数値の中から最小のものを見つけることです。この関数は、任意の数のパラメーターを設定できます
:
1 | >> abs (10)10>> abs (-10)10>> abs (-10px)10px>> abs (-2em)2em>> abs (-.5%)0.5%>> abs (-1px / 2px)0.5
|
ログイン後にコピー
ただし、min() 関数内で 2 つの異なるタイプの単位が同時に出現する場合は、エラー メッセージを報告します:
1 | 1 .footer {2 width: abs (-12.3px);3 }
|
ログイン後にコピー
max() 関数
max() 関数は min() 関数と同じですが、違いは、max() 関数が一連の最大値を取得するために使用されることです。数値 :
1 | 1 .footer {2 width: 12.3px;3 }
|
ログイン後にコピー
同様に、
max() 関数に異なる単位がある場合、エラーが報告されます:
1 | >> min(1,2,1%,3,300%)1%>> min(1px,2,3px)1px>> min(1em,2em,6em)1em
|
ログイン後にコピー
Number関数-ランダム()関数
random() この関数は乱数を取得するために使用されます
:
1 | <strong>>> min(<strong>1px,1em</strong>)SyntaxError: Incompatible units: 'em' and 'px' .</strong>
|
ログイン後にコピー