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

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

シニア番号	パラメータと説明	タイプ	デフォルト値
1	$color 色の明るさをチェックします。	色	なし
2	$yes 色が明るい場合は、$ yesの色を返します。	色	$ black
3	$no 色が暗い場合は、$ nocolorを返します。	色	$ white
4	$threshold 明度のしきい値を表します。	パーセンテージ	60％

スマートスケール

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

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

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

シニア番号	パラメータと説明	タイプ	デフォルト値
1	$color 色をスケーリングするために使用されます。	色	なし
2	$scale スケールアップまたはスケールダウンするパーセンテージを指定します。	パーセンテージ	5％
3	$threshold 明度のしきい値を表します。	パーセンテージ	40％

テキスト入力

テキスト入力タイプを使用しながらセレクターを作成します。入力タイプの指定には、次の形式を使用します-

text-inputs($types)

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

シニア番号	パラメータと説明	タイプ	デフォルト値
1	$types セレクターを生成するための多数のテキスト入力タイプを提供します。	色	-

ストリップユニット

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

strip-unit($num)

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

シニア番号	パラメータと説明	タイプ	デフォルト値
1	$num 値から単位を削除するときの数値を指定します。	色	なし

rem-calc

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

rem-calc($values, $base)

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

シニア番号	パラメータと説明	タイプ	デフォルト値
1	$values ピクセル値をレム値に変換し、スペースを使用してそれらを区切ります。カンマ区切りのリストを変換する場合は、リストを括弧で囲みます。	番号またはリスト	なし
2	$base ピクセルをレム値に変換するときに基本値を提供します。ベースにnull値がある場合、関数は$ base-font-size変数をベースとして使用します。	数	ヌル

持っている値

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

has-value($val)

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

シニア番号	パラメータと説明	タイプ	デフォルト値
1	$val 指定された値をチェックします。	混合	なし

ゲットサイド

値の辺を指定し、パディング、マージンなどで上/右/下/左の値を定義します。値の辺を指定するには、次の形式を使用します-

has-value($val)

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

シニア番号	パラメータと説明	タイプ	デフォルト値
1	$val 値の側面を指定します。	リストまたは番号	なし
2	$side （上/右/下/左）値がどちら側に戻るかを決定します。	キーワード	なし

get-border-value

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

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

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

シニア番号	パラメータと説明	タイプ	デフォルト値
1	$val 境界線の特定の値を見つけます。	リスト	なし
2	$elem 境界成分を抽出するために使用されます。	キーワード	なし