Foundation-sass-mixins

財団-Sass Mixins

インポート中

_scss/util/_mixins.scss_ファイルの下にあるSASSミックスインの内容をインポートします。 次のコード行を使用して、SASSミックスインをインポートできます-

@import 'util/mixins';

Sassリファレンス

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

ミックスイン

次のミックスインを使用して、コンポーネントのCSSクラス構造を構築できます。

• CSS-三角形 *

  ドロップダウン矢印、ドロップダウンピップなどの作成に使用されます。 <i>＆

  before </i>または<i>＆:: after </i>セレクターを使用して、既存の要素に三角形を添付します。 それは次の形式を使用します-

@include css-triangle($triangle-size, $triangle-color, $triangle-direction);

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

Sr.No.	Parameter & Description	Type	Default Value
1	$triangle-size* 三角形の幅を定義します。	Number	None
2	$triangle-color 三角形の色を定義します。	Color	None
3	$triangle-direction 上、右、下、左などの三角形の方向を定義します。	Keyword	None

• ハンバーガー *

これは、幅、高さ、バーの数、色でメニューアイコンを作成するために使用されます。 それは次の形式を使用します-

@include hamburger($color, $color-hover, $width, $height, $weight, $bars);

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

Sr.No.	Parameter & Description	Type	Default Value
1	$color* アイコンの色を定義します。	Color	None
2	$color-hover アイコンにカーソルを合わせたときの色を定義します。	Color	None
3	$width アイコンの幅を定義します。	Number	None
4	$height アイコンの高さを定義します。	Number	None
5	$weight アイコンの個々のバーの重量を定義します。	Number	None
6	$bars アイコンのバーの数を定義します。	Number	None

• 背景三角形 *

背景画像を要素に指定するために使用されます。 それは次の形式を使用します-

@include background-triangle($color);

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

Sr.No.	Parameter & Description	Type	Default Value
1	$color* 三角形の色を定義します。	Color	$black

クリアフィックス

このミックスインは、子要素を自動的にクリアするため、追加のマークアップは不要です。 それは次の形式を使用します-

@include clearfix;

• 自動幅 *

コンテナに存在する要素の数に基づいて、要素のサイズを自動的に調整します。 それは次の形式を使用します-

@include auto-width($max, $elem);

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

Sr.No.	Parameter & Description	Type	Default Value
1	$max* コンテナ内のアイテムの最大数を識別します。	Number	None
2	$elem 兄弟セレクターのタグを使用します。	Keyword	li

無効マウス概要

マウス入力アクションを識別するときに要素の周囲のアウトラインを無効にするために使用されます。 それは次の形式を使用します-

@include disable-mouse-outline;

*ELEMENT-INVISIBLE*

要素を非表示にするために使用され、キーボードや他のデバイスで使用できます。 それは次の形式を使用します-

@include element-invisible;

要素非表示オフ

非表示の要素を削除し、element-invisible（） mixinを使用してCSS出力を反転します。 それは次の形式を使用します-

@include element-invisible-off;

垂直センター

次の形式を使用して、非静的な親要素内の要素を垂直方向の中央に配置するために使用されます-

@include vertical-center;

水平センター

次の形式を使用して、非静的な親要素内の要素を水平方向に中央に配置するために使用されます-

@include horizontal-center;

アブソリュートセンター

次の形式を使用して、非静的な親要素内の要素を絶対中心に配置するために使用されます-

@include absolute-center;