SASS - 関数 - コードワールド

この記事では、サスの機能について説明します。サスこの記事は、最も重要で最も頻繁に使用される機能について説明し、多数の機能が含まれ、他は公式ドキュメントを参照することができます。

カラー機能

SASSは、多くの色の操作機能が含まれています。たとえば、次の機能は、色を明るくまたは暗くするために使用することができる透明の色、低減する機能色が、そのように透明性を向上させる機能関数は、2つの色を混合するために使用することができます。lighten()darken()opacify()transparent()mix()

以下は、あるmix()機能の例：

div {
    padding: 20px;
    margin: 20px;
}
.one {
    background: red;
    }
.two {
    background: yellow;
}
.three {
    background: mix(red, yellow);
    }
.four {
    background: mix(red, yellow, 35%);
}
.five {
    background: mix(red, yellow, 65%);
}

CSSコードは、次の出力をコンパイル：

div {
  padding: 20px;
  margin: 20px; }

.one {
  background: red; }

.two {
  background: yellow; }

.three {
  background: #ff8000; }

.four {
  background: #ffa600; }

.five {
  background: #ff5900; }

構文は次のとおりです。mix($color1， $color2， [$weight])オプション$weightを省略した場合、パラメータ$カラー1の重み、重量は50％です。

文字列関数

このような引用符で囲まれた文字列に追加することのような多くのサス列処理関数、quote()文字列の長さの取得string-length()文字列にコンテンツの所与の位置string-insert()。

数値関数

例えば、数値処理関数：percentage()パーセンテージとして変換ユニットなし値、round()番号が最も近い整数に丸められているmin()とmax()いくつかの数字の最小値または最大値を取得し、random()乱数を返します。

一覧機能

操作一覧リスト機能は、length()リストの長さを返すnth()リスト内の特定のアイテムを返し、join()接続された二つのリストは、append()リストの末尾に値を追加します。

地図機能

マップマップ機能動作、map-get()マップに対応する値に応じて取得キー、map-merge()2は、新しいマップにマージマッピングするためのmap-values()マップ内のすべての値。

関数セレクター

などセレクタ関連機能は、：selector-append()別の文字を選択するセレクタに結合させることができます。

セルフテスト機能

次のような自己関連の機能、feature-exists()特徴が存在するかどうか、現在のバージョンサスをチェックvariable-exists()変数が存在する場合、現在のスコープを確認し、mixin-exists()ミックスインがあるかどうかを確認。

関数の完全なリストについてはサス

他の多くの機能がありますが、ご参照くださいSassのドキュメント。

SASS - 関数