Sass 関数番号 function_html/css_WEB-ITnose-htmlチュートリアル-php.cn

Sass 関数番号 function_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:33:21

オリジナル

1169 人が閲覧しました

数値関数の概要

Sass の数値関数の概要では、数値に対する一連の関数関数が提供されています。

percentage($value): 単位のない数値をパーセント値に変換します。

round($value): 値を四捨五入して最も近い整数に変換します。

ceil($value): それより大きい小数を次の整数に変換します。

: 数値の小数部分を削除します。

;

percentage() 関数は主に、単位のない数値をパーセンテージ形式に変換します。 すごい

コンパイルされた CSS:

>> percentage(.2)20%>> percentage(2px / 10px)20%>> percentage(2em / 10em)20%
ログイン後にコピー

変換された値は単位付きの値であるため、コンパイル時にエラーメッセージが報告されます。

数値関数-round() 関数

round() 関数は、 数値を最も近い整数に四捨五入することができます

1 .footer{2  width:percentage(.2)3 }

ログイン後にコピー

1 .footer{2  width:20%;3 }

ログイン後にコピー

コンパイルされた CSS :

すごい

単位付きの任意の値をround()関数で運ぶことができます。

number関数-CEIL（）

それ自体よりも大きい 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 .footer{2  width:round(12.3px);3 }

ログイン後にコピー

コンパイルされたCSS:

1 .footer{2  width:12px;3 }

ログイン後にコピー

数値関数-floor() 関数

床() 関数は、ceil() 関数のちょうど逆です。その主な機能は、桁上げを行わずに数値の小数部分を削除することです。つまり、

は計算ではなく丸めのみを実行します

>> 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

ログイン後にコピー

1 .footer {2 width:ceil(12.3px);3 }
ログイン後にコピー

コンパイルされた CSS:

1 .footer{2  width:13px;3 }

ログイン後にコピー

Number function -abs() 関数

abs()関数は数値の絶対値を返します。

>> 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 .footer {2  width:floor(12.3px);3 }

ログイン後にコピー

コンパイル済み CSS:

1 .footer{2  width:12px;3 }

ログイン後にコピー

数値関数 - min() 関数、max() 関数 min() 関数

min()この関数の主な機能は、複数の数値の中から最小のものを見つけることです。この関数は、任意の数のパラメーターを設定できます

>> abs(10)10>> abs(-10)10>> abs(-10px)10px>> abs(-2em)2em>> abs(-.5%)0.5%>> abs(-1px / 2px)0.5

ログイン後にコピー

ただし、min() 関数内で 2 つの異なるタイプの単位が同時に出現する場合は、エラーメッセージを報告します:

1 .footer {2  width:abs(-12.3px);3 }

ログイン後にコピー

max() 関数

max() 関数は min() 関数と同じですが、違いは、max() 関数が一連の最大値を取得するために使用されることです。数値 :

1 .footer {2  width: 12.3px;3 }

ログイン後にコピー

同様に、

max() 関数に異なる単位がある場合、エラーが報告されます:

>> min(1,2,1%,3,300%)1%>> min(1px,2,3px)1px>> min(1em,2em,6em)1em

ログイン後にコピー

Number関数-ランダム()関数

random() この関数は乱数を取得するために使用されます

>> min(<strong>1px,1em</strong>)SyntaxError: Incompatible units: 'em' and 'px'.

ログイン後にコピー