Foundation-Sass関数

Foundationは、utilcolorselectorunitvalueなどで使用できる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

境界成分を抽出するために使用されます。

キーワード なし