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

4-1 スタイルの継承ができるエクステンド（@extend）

エクステンドの基本

.box {
    margin: 0 0 30px;
    padding: 15px;
    border: 1px solid #ccc;
}

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

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

同じルールセット内で、複数継承する

// エクステンド
.notes {
    color: #d92c25;
    font-weight: bold;
    text-align: center;
}
.bd {
    border-top: 1px solid #900;
    border-bottom: 1px solid #900;
}

// 複数継承
.item {
    small {
        display: block;
        padding: 10px;
        @extend .notes;
        @extend .bd;
    }
}

.notes, .item small {
  color: #d92c25;
  font-weight: bold;
  text-align: center;
}

.bd, .item small {
  border-top: 1px solid #900;
  border-bottom: 1px solid #900;
}

.item small {
  display: block;
  padding: 10px;
}

エクステンドの連鎖

.att {
    color: red;
    font-weight: normal;
}
.attBox {
    // .att を継承
    @extend .att;
    padding: 15px;
    border: 1px solid red;
}

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

.att, .attBox, .notes {
  color: red;
  font-weight: normal;
}

.attBox, .notes {
  padding: 15px;
  border: 1px solid red;
}

エクステンドが使えるセレクタ

エクステンドが使える例

// クラスセレクタ
.class { ... }

// タイプセレクタ
small { ... }

// IDセレクタ
#selectorID { ... }

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

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

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

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

エクステンドが使えない例

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

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

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

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

エクステンド専用のプレースホルダーセレクタ

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

// プレースホルダーセレクタを継承
.item {
    @extend %boxBase;
    margin-bottom: 20px;
}
section {
    @extend %boxBase;
    margin-bottom: 60px;
}

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

.item {
  margin-bottom: 20px;
}

section {
  margin-bottom: 60px;
}

@media 内ではエクステンドは使用できない

%btnBase {
    display: inline-block;
    padding: 5px 10px;
    background: #eee;
}

@media all and (orientation:landscape) {
    a {
        @extend %btnBase;
    }
}

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

@media all and (orientation:landscape) {
    %btnBase {
        display: inline-block;
        padding: 5px 10px;
        background: #eee;
    }
    a {
        @extend %btnBase;
    }
}

@media all and (orientation:landscape) {
    %btnBase {
        display: inline-block;
        padding: 5px 10px;
        background: #eee;
    }
    a {
        @extend %btnBase;
    }
}

.btn {
    @extend %btnBase;
}

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

警告を抑止する !optional フラグ

.btn {
    @extend %btnBase !optional;
}