第4章高度な機能を覚えてSassを使いこなそう

4-2 柔軟なスタイルの定義が可能なミックスイン（@mixin）

ミックスインの基本

// ミックスインを定義
@mixin boxSet {
	padding: 15px;
	background: #999;
	color: white;
}

// 定義したミックスインを呼び出し
.relatedArea {
	@include boxSet;
}

.relatedArea {
  padding: 15px;
  background: #999;
  color: white;
}

// 定義したミックスインを呼び出し
.relatedArea {
	@include boxSet;
}
// 別のルールセットでも呼び出し
.pickupArea {
	@include boxSet;
}

.relatedArea {
  padding: 15px;
  background: #999;
  color: white;
}
.pickupArea {
  padding: 15px;
  background: #999;
  color: white;
}

引数を使ったミックスイン

// 引数を使ったミックスインを定義
@mixin kadomaru($value) {
	-moz-border-radius: $value;
	-webkit-border-radius: $value;
	border-radius: $value;
}

.box {
	@include kadomaru(3px);
	background: #eee;
}
.item {
	border: 1px solid #999;
	@include kadomaru(5px 10px);
}

.box {
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  background: #eee;
}
.item {
  border: 1px solid #999;
  -moz-border-radius: 5px 10px;
  -webkit-border-radius: 5px 10px;
  border-radius: 5px 10px;
}

引数に初期値を定義する

@mixin kadomaru($value: 3px) {
	-moz-border-radius: $value;
	-webkit-border-radius: $value;
	border-radius: $value;
}
.boxA {
	@include kadomaru;
	background: #eee;
}
.boxB {
	@include kadomaru();
	background: #f1f1f1;
}

.boxA {
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  background: #eee;
}
.boxB {
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  background: #f1f1f1;
}

引数を複数指定する

@mixin boxBase($margin: 30px 0, $padding: 10px) {
	margin: $margin;
	padding: $padding;
}

.boxA {
	@include boxBase;
	background: #eee;
}
.boxB {
	@include boxBase(0 0 50px, 20px);
	background: #f1f1f1;
}

.boxA {
  margin: 30px 0;
  padding: 10px;
  background: #eee;
}

.boxB {
  margin: 0 0 50px;
  padding: 20px;
  background: #f1f1f1;
}

.boxB {
	@include boxBase(0 0 50px);
	background: #f1f1f1;
}

.boxB {
	@include boxBase(,20px);
	background: #f1f1f1;
}

カンマ（,）を使うプロパティには可変長引数を利用する

@mixin shadow($value) {
	text-shadow: $value;
}

h2 {
	@include shadow(8px 8px 0 #999, 15px -10px 0 #eee);
}

// 複数の値を () で囲ってリストにする
h2 {
	@include shadow((8px 8px 0 #999, 15px -10px 0 #eee));
}

// 複数の値を "" や '' で囲って文字列にする
h2 {
	@include shadow(unquote("8px 8px 0 #999, 15px -10px 0 #eee"));
}

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

h2 {
	@include shadow(8px 8px 0 #999, 15px -10px 0 #eee);
}

h2 {
  text-shadow: 18px 8px 0 #999999, 15px -10px 0 #eeeeee;
}

複数の引数が有るミックスインを読み込む際に可変長引数を使う

@mixin boxBase($w: 250px, $pd: 15px, $bg_c: #fff, $bd_c: #ccc) {
	width: $w;
	padding: $pd;
	background-color: $bg_c;
	border: 1px solid $bd_c;
}

$values: 300px, 20px;

.item {
	float: left;
	@include boxBase($values...);
}

.item {
  float: left;
  width: 300px;
  padding: 20px;
  background-color: white;
  border: 1px solid #cccccc;
}

.item {
  float: left;
  width: 300px, 20px;
  padding: 15px;
  background-color: white;
  border: 1px solid #cccccc;
}

ミックスインのスコープ（利用できる範囲）を制限する

.main {
	@mixin margin {
		margin: 50px 0;
	}
	.item {
		@include margin;
	}
}

.main {
	@mixin margin {
		margin: 50px 0;
	}
}
.item {
	@include margin;
}

ミックスインにコンテントブロックを渡す @content

.item {
	.image {
		float: left;
		*:first-child + html & {
			zoom: 1;
		}
	}
	.text {
		overflow: hidden;
		background: rgba(0,0,0,.2);
		*:first-child + html & {
			background: #eee;
		}
	}
}

@mixin hackIE7 {
	*:first-child + html & {
		@content;
	}
}

.item {
	.image {
		float: left;
		@include hackIE7 {
			zoom: 1;
		}
	}
	.text {
		overflow: hidden;
		background: rgba(0,0,0,.2);
		@include hackIE7 {
			background: #eee;
		}
	}
}

.item .image {
  float: left;
}
*:first-child + html .item .image {
  zoom: 1;
}
.item .text {
  overflow: hidden;
  background: rgba(0, 0, 0, 0.2);
}
*:first-child + html .item .text {
  background: #eee;
}

ミックスイン名で使える文字と使えない文字

@mixin shadow1 { ～ }
@mixin shadow-1 { ～ }
@mixin shadow_1 { ～ }
@mixin 影 { ～ }
@mixin ｓｈａｄｏw { ～ }
@mixin _shadow { ～ }
@mixin -shadow { ～ }

@mixin 01shadow { ～ }	// 数字から始まっている
@mixin shadow@2 { ～ }	// @など使えない記号
@mixin --shadow { ～ }	// 連続したハイフンから始まっている