第4章 高度な機能を覚えてSassを使いこなそう4-2 柔軟なスタイルの定義が可能なミックスイン（@mixin）Sample Code

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

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

1
.relatedArea {
2
  padding: 15px;
3
  background: #999;
4
  color: white;
5
}

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

6
// 別のルールセットでも呼び出し
7
.pickupArea {
8
  @include boxSet;
9
}

1
.relatedArea {
2
  padding: 15px;
3
  background: #999;
4
  color: white;
5
}
6

7
.pickupArea {
8
  padding: 15px;
9
  background: #999;
10
  color: white;
11
}

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

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

1
.box {
2
  -moz-border-radius: 3px;
3
  -webkit-border-radius: 3px;
4
  border-radius: 3px;
5
  background: #eee;
6
}
7

8
.item {
9
  border: 1px solid #999;
10
  -moz-border-radius: 5px 10px;
11
  -webkit-border-radius: 5px 10px;
12
  border-radius: 5px 10px;
13
}

1
@mixin kadomaru($value: 3px) {
2
  -moz-border-radius: $value;
3
  -webkit-border-radius: $value;
4
  border-radius: $value;
5
}
6
.boxA {
7
  @include kadomaru;
8
  background: #eee;
9
}
10
.boxB {
11
  @include kadomaru();
12
  background: #f1f1f1;
13
}

1
.boxA {
2
  -moz-border-radius: 3px;
3
  -webkit-border-radius: 3px;
4
  border-radius: 3px;
5
  background: #eee;
6
}
7

8
.boxB {
9
  -moz-border-radius: 3px;
10
  -webkit-border-radius: 3px;
11
  border-radius: 3px;
12
  background: #f1f1f1;
13
}

1
@mixin boxBase($margin: 30px 0, $padding: 10px) {
2
  margin: $margin;
3
  padding: $padding;
4
}
5

6
.boxA {
7
  @include boxBase;
8
  background: #eee;
9
}
10
.boxB {
11
  @include boxBase(0 0 50px, 20px);
12
  background: #f1f1f1;
13
}

1
.boxA {
2
  margin: 30px 0;
3
  padding: 10px;
4
  background: #eee;
5
}
6

7
.boxB {
8
  margin: 0 0 50px;
9
  padding: 20px;
10
  background: #f1f1f1;
11
}

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

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

1
.boxB {
2
  @include boxBase($padding: 20px);
3
  background: #f1f1f1;
4
}

1
@mixin shadow($value) {
2
  text-shadow: $value;
3
}
4

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

1
@use "sass:string";
2

3
@mixin shadow($value) {
4
  text-shadow: $value;
5
}
6

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

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

1
@mixin shadow($value...) {
2
  text-shadow: $value;
3
}
4

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

1
h2 {
2
  text-shadow: 8px 8px 0 #999, 15px -10px 0 #eee;
3
}

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

8
$values: 300px, 20px;
9

10
.item {
11
  float: left;
12
  @include boxBase($values...);
13
}

1
.item {
2
  float: left;
3
  width: 300px;
4
  padding: 20px;
5
  background-color: #fff;
6
  border: 1px solid #ccc;
7
}

1
.item {
2
  float: left;
3
  width: 300px, 20px;
4
  padding: 15px;
5
  background-color: #fff;
6
  border: 1px solid #ccc;
7
}

1
.main {
2
  @mixin margin {
3
    margin: 50px 0;
4
  }
5
  .item {
6
    @include margin;
7
  }
8
}

1
.main {
2
  @mixin margin {
3
    margin: 50px 0;
4
  }
5
}
6
.item {
7
  @include margin;
8
}

1
.item {
2
  .image {
3
    float: left;
4
    @media only screen and (max-width: 768px) {
5
      float: none;
6
    }
7
  }
8
  .text {
9
    overflow: hidden;
10
    margin-left: 15px;
11
    @media only screen and (max-width: 768px) {
12
      margin-left: 0;
13
    }
14
  }
15
}

1
@mixin media($width-media: 768px) {
2
  @media only screen and (max-width: $width-media) {
3
    @content;
4
  }
5
}
6

7
.item {
8
  .image {
9
    float: left;
10
    @include media {
11
      float: none;
12
    }
13
  }
14
  .text {
15
    overflow: hidden;
16
    margin-left: 15px;
17
    @include media {
18
      margin-left: 0;
19
    }
20
  }
21
}

1
.item .image {
2
  float: left;
3
}
4
@media only screen and (max-width: 768px) {
5
  .item .image {
6
    float: none;
7
  }
8
}
9
.item .text {
10
  overflow: hidden;
11
  margin-left: 15px;
12
}
13
@media only screen and (max-width: 768px) {
14
  .item .text {
15
    margin-left: 0;
16
  }
17
}

1
@mixin shadow1 { ～ }
2
@mixin shadow-1 { ～ }
3
@mixin shadow_1 { ～ }
4
@mixin 影 { ～ }
5
@mixin ｓｈａｄｏw { ～ }
6
@mixin _shadow { ～ }
7
@mixin -shadow { ～ }

1
@mixin 01shadow { ～ }
2
@mixin shadow@2 { ～ }
3
@mixin --shadow { ～ }