吉本集の個人ブログ
Web制作の技術について書いています。たまに日記も書きます。

@mixin : 関数の使い方について

2014年3月1日 / category : reference-sass, sass

Sassでは、関数を使用することができます。下記のような記述方法です。

@mixin 関数名{
	//処理内容
}

.class{
	@include 関数名;
}

もちろん、引数を渡すこともできます。

@mixin 関数名(引数){
	//処理内容
}

.class{
	@include 関数名(値);
}

こんな感じです。関数を定義する際は、頭に@mixinをつけ、定義した関数を実行する際は、頭に@includeを付けます。

引数のない関数の参考例

Sass
@mixin setBox{
	width: 640px;
	height: 480px;
	margin:12px;
	background: #ccc;
	border: 5px solid #333;
}

.box{
	@include setBoxA;
}
CSS – コンパイル後
.box {
	width: 640px;
	height: 480px;
	margin: 12px;
	background: #ccc;
	border: 5px solid #333;
}

引数がある関数の参考例

Sass
@mixin setBox($w, $h){
	width: $w + px;
	height: $h + px;
	margin:12px;
	background: #ccc;
	border: 5px solid #333;
}

.box{
	@include setBoxB(320, 240);
}
CSS – コンパイル後
.box {
	width: 320px;
	height: 240px;
	margin: 12px;
	background: #ccc;
	border: 5px solid #333;
}

引数に初期値を設定しておく関数の参考例

Sass
@mixin setBox($w:640, $h:120){
	width: $w + px;
	height: $h + px;
	margin:12px;
	background: #ccc;
	border: 5px solid #333;
}

.box{
	@include setBoxC(160);
}
CSS – コンパイル後
.box {
	width: 160px;
	height: 120px;
	margin: 12px;
	background: #ccc;
	border: 5px solid #333;
}

引数の数が可変する場合の記述方法

Sass
@mixin setBoxShadowA($value){
	box-shadow: $value;
}

@mixin setBoxShadowB($value...){
	box-shadow: $value;
}

.boxShadowA{
	//引数が1つの場合は、通常の実行処理
	@include setBoxShadowA(3px 3px 3px #f00);
}

.boxShadowB{
	//引数が複数ある場合、unquote関数を使用して、引数の中を文字列にする
	@include setBoxShadowA(unquote('3px 3px 3px #f00, 6px 6px 6px #0f0, 9px 9px 9px #00f'));
}

.boxShadowC{
	//関数側の引数設定を($value...)とすることで、可変対応が可能になる(推奨)
	@include setBoxShadowB(3px 3px 3px #f00, 6px 6px 6px #0f0, 9px 9px 9px #00f);
}
CSS – コンパイル後
.boxShadowA {
	box-shadow: 3px 3px 3px red;
}

.boxShadowB {
	box-shadow: 3px 3px 3px #f00, 6px 6px 6px #0f0, 9px 9px 9px #00f;
}

.boxShadowC {
	box-shadow: 3px 3px 3px red, 6px 6px 6px lime, 9px 9px 9px blue;
}