Foundation-sass-functions

基礎-Sass関数

Foundationは、util _、 color 、 selector 、 unit 、 value_などと併用できるSASSユーティリティ関数のセットを提供します。

次のコード行を使用して、一度にすべてのユーティリティファイルをインポートできます-

@import 'util/util';

以下に示すように、個々のユーティリティファイルをインポートすることもできます-

@import 'util/color';
@import 'util/selector';
@import 'util/unit';
@import 'util/value';

Sassリファレンス

次のSASS関数を使用して、コンポーネントのスタイルを変更できます。

前景

背景色に基づいて要素に前景色を提供します。 それは、パラメータの異なるタイプを割り当てるために次の形式を使用します-

foreground($color, $yes, $no, $threshold)

上記のパラメータは、次の表で指定されています-

Sr.No.	Parameter & Description	Type	Default Value
1	$color 色の明るさをチェックします。	Color	None
2	$yes 色が明るい場合、_ $ yes_色を返します。	Color	$black
3	$no 色が暗い場合、_ $ no_色を返します。	Color	$white
4	$threshold 明度のしきい値を表します。	Percentage	60%

スマートスケール

明度に応じて要素に適切な色を提供します。 適切な色を指定するために次の形式を使用します-

smart-scale($color, $scale, $threshold)

上記のパラメータは、次の表で指定されています-

Sr.No.	Parameter & Description	Type	Default Value
1	$color 色のスケーリングに使用されます。	Color	None
2	$scale 拡大または縮小する割合を指定します。	Percentage	5%
3	$threshold 明度のしきい値を表します。	Percentage	40%

テキスト入力

テキスト入力タイプの使用中にセレクターを作成します。 入力タイプを指定するために次の形式を使用します-

text-inputs($types)

次の表に指定されているパラメータを使用します-

Sr.No.	Parameter & Description	Type	Default Value
1	$types セレクターを生成するための多くのテキスト入力タイプを提供します。	Color	-

ストリップユニット

値から単位を削除し、数値のみを返します。 値から単位を削除するために次の形式を使用します-

strip-unit($num)

次の表に指定されているパラメータを使用します-

Sr.No.	Parameter & Description	Type	Default Value
1	$num 値から単位を削除するときに番号を指定します。	Color	None

レムカルク

rem値に一致するようにピクセル値を変更します。 ピクセル値をrem値に変換するために次の形式を使用します-

rem-calc($values, $base)

表に指定されているように、次のパラメータを使用します-

Sr.No.	Parameter & Description	Type	Default Value
1	$values ピクセル値をrem値に変換し、スペースを使用して区切ります。 コンマ区切りリストを変換する場合は、リストを括弧で囲みます。	Number or List	None
2	$base ピクセルをrem値に変換するときにベース値を提供します。 ベースにnull値がある場合、関数は_ $ base-font-size_変数をベースとして使用します。	Number	null

価値がある

falseでない場合、値を指定します。 false値には、null、none、0、または空のリストが含まれます。 値を指定するために次の形式を使用します-

has-value($val)

次の表に指定されているパラメータを使用します-

Sr.No.	Parameter & Description	Type	Default Value
1	$val 指定された値をチェックします。	Mixed	None

ゲットサイド

値のサイドを指定し、パディング、マージンなどの上/右/下/左の値を定義します。 値の側を指定するために次の形式を使用します-

has-value($val)

表に指定されているように、次のパラメータを使用します-

Sr.No.	Parameter & Description	Type	Default Value
1	$val 値の側を指定します。	List or Number	None
2	$side （上/右/下/左）値がどちら側に戻るかを決定します。	Keyword	None

境界値を取得

要素の境界値を決定します。 それは、境界値を指定するために次の形式を使用します-

get-border-value($val, $elem)

表に指定されているように、次のパラメータを使用します-

Sr.No.	Parameter & Description	Type	Default Value
1	$val 境界線の特定の値を見つけます。	List	None
2	$elem 境界コンポーネントを抽出するために使用されます。	Keyword	None