第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;
}

.boxB {
    @include boxBase($padding: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;
        @media only screen and (max-width: 768px) {
            float: none;
        }
    }
    .text {
        overflow: hidden;
        margin-left: 15px;
        @media only screen and (max-width: 768px) {
            margin-left: 0;
        }
    }
}

@mixin media($width-media: 768px) {
    @media only screen and (max-width: $width-media) {
        @content;
    }
}

.item {
    .image {
        float: left;
        @include media {
            float: none;
        }
    }
    .text {
        overflow: hidden;
        margin-left: 15px;
        @include media {
            margin-left: 0;
        }
    }
}

.item .image {
  float: left;
}

@media only screen and (max-width: 768px) {
  .item .image {
    float: none;
  }
}

.item .text {
  overflow: hidden;
  margin-left: 15px;
}

@media only screen and (max-width: 768px) {
  .item .text {
    margin-left: 0;
  }
}

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

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

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