SASSの関数

このレッスンでは、関数の使用方法について検討します。関数は、ミックスインと幾分似ていますが、パラメータを追加することができ、その値は変更可能です。

フォントサイズを設定する関数 func を作成してみましょう。サイズはパラメータとして渡し、そのパラメータは変数とします：

$font-size: 10px;

次に、関数にパラメータ $n を記述し、関数本体で必ず @return を指定します：

@function func($n) {
	@return $n * $font-size;
}
#main {
	font-size: func(2);
}

コンパイル結果：

#main {
	font-size: 20px;
}

関数には名前付き引数を渡すこともできます。前の例の条件を書き直してみましょう：

@function func($n) {
	@return $n * $font-size;
}
#main {
	font-size: func($n: 2);
}

そして、ファイル styles.css には同じコードが表示されます：

#main {
	font-size: 20px;
}

次のコードのコンパイル結果はどうなるか説明してください：

$size: 10px;
@function func($num) {
	@return $num + $size;
}
div {
	font-size: func(4);
}

次のコードのコンパイル結果はどうなるか説明してください：

$size: 4px;
@function func($num) {
	@return $num + $size;
}
.card {
	padding: func(2);
	margin: func(6);
	width: func(416);
}

次のコードのコンパイル結果はどうなるか説明してください：

$size: 2px;

@function func($num) {
	@return ($num * $size) + 20;
}

.logo {
	width: func(2);
	height: func(4);
}