第4章 高度な機能を覚えてSassを使いこなそう4-1 スタイルの継承ができるエクステンド（@extend）Sample Code

1
.box {
2
  margin: 0 0 30px;
3
  padding: 15px;
4
  border: 1px solid #ccc;
5
}
6

7
// .box で使ったスタイルを継承
8
.item {
9
  @extend .box;
10
}

1
.box, .item {
2
  margin: 0 0 30px;
3
  padding: 15px;
4
  border: 1px solid #ccc;
5
}

1
// エクステンド
2
.notes {
3
  color: #d92c25;
4
  font-weight: bold;
5
  text-align: center;
6
}
7
.bd {
8
  border-top: 1px solid #900;
9
  border-bottom: 1px solid #900;
10
}
11

12
// 複数継承
13
.item {
14
  small {
15
    display: block;
16
    padding: 10px;
17
    @extend .notes;
18
    @extend .bd;
19
  }
20
}

1
.notes, .item small {
2
  color: #d92c25;
3
  font-weight: bold;
4
  text-align: center;
5
}
6

7
.bd, .item small {
8
  border-top: 1px solid #900;
9
  border-bottom: 1px solid #900;
10
}
11

12
.item small {
13
  display: block;
14
  padding: 10px;
15
}

1
.att {
2
  color: red;
3
  font-weight: normal;
4
}
5
.attBox {
6
  // .att を継承
7
  @extend .att;
8
  padding: 15px;
9
  border: 1px solid red;
10
}
11

12
.notes {
13
  // .att が継承されている、.attBox を継承（連鎖）
14
  @extend .attBox;
15
}

1
.att, .attBox, .notes {
2
  color: red;
3
  font-weight: normal;
4
}
5

6
.attBox, .notes {
7
  padding: 15px;
8
  border: 1px solid red;
9
}

1
// クラスセレクタ
2
.class { ... }
3

4
// タイプセレクタ
5
small { ... }
6

7
// IDセレクタ
8
#selectorID { ... }
9

10
// 連結セレクタ
11
.pd.bd { ... }
12

13
// 属性セレクタ
14
input[type="text"] { ... }
15

16
// 擬似クラス
17
a:hover { ... }
18

19
// 擬似要素
20
p::first-line { ... }

1
// 子孫セレクタ
2
.item p { ... }
3

4
// 子セレクタ
5
#main > article { ... }
6

7
// 隣接セレクタ
8
h2 + h3 { ... }
9

10
// 間接セレクタ
11
h3 ~ h3 { ... }

1
// エクステンド専用のプレースホルダーセレクタ
2
%boxBase {
3
  padding: 15px;
4
  border: 1px solid #999;
5
}
6

7
// プレースホルダーセレクタを継承
8
.item {
9
  @extend %boxBase;
10
  margin-bottom: 20px;
11
}
12
section {
13
  @extend %boxBase;
14
  margin-bottom: 60px;
15
}

1
section, .item {
2
  padding: 15px;
3
  border: 1px solid #999;
4
}
5

6
.item {
7
  margin-bottom: 20px;
8
}
9

10
section {
11
  margin-bottom: 60px;
12
}

1
%btnBase {
2
  display: inline-block;
3
  padding: 5px 10px;
4
  background: #eee;
5
}
6

7
@media all and (orientation:landscape) {
8
  a {
9
    @extend %btnBase;
10
  }
11
}

1
@media all and (orientation: landscape) {
2
  a {
3
    display: inline-block;
4
    padding: 5px 10px;
5
    background: #eee;
6
  }
7
}

1
@media all and (orientation:landscape) {
2
  %btnBase {
3
    display: inline-block;
4
    padding: 5px 10px;
5
    background: #eee;
6
  }
7
  a {
8
    @extend %btnBase;
9
  }
10
}

1
@media all and (orientation:landscape) {
2
  %btnBase {
3
    display: inline-block;
4
    padding: 5px 10px;
5
    background: #eee;
6
  }
7
  a {
8
    @extend %btnBase;
9
  }
10
}
11

12
.btn {
13
  @extend %btnBase;
14
}

1
@media all and (orientation: landscape) {
2
  .btn, a {
3
    display: inline-block;
4
    padding: 5px 10px;
5
    background: #eee;
6
  }
7
}

1
.btn {
2
  @extend %btnBase !optional;
3
}