【アウトプット㊸】-Sass- スタイルの継承

エクステンドという機能で指定したセレクタのスタイルを継承することができる。
エクステンドは一度使ったスタイルを継承して使いまわすことができるので、継承する数が増えれば増えるほど記述量を減らすことができ、同じスタイルを何度も書く必要がなくなる！

▼SASS

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

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

「@extend セレクタ名;」でスタイルを継承することができる

▼CSS

//.boxの内容を.itemに継承する
.box, .item {
    margin: 0 0 30px;
    padding: 15px;
    border: 1px solid #ccc;
}  

ルールセット内では複数継承することもできる

▼SASS

.note {
    color: #ccc;
    font-weight: bold;
    text-align: center;
}

.bd {
    border-top: 1px solid #ccc;
}

//.item smallを.noteと.bdに継承する
.item {
    small {
        display: block;
        padding: 10px;
        @extend .note;
        @extend .bd;
    }
}                

▼CSS

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

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

.item small {
      display: block;
      padding: 10px;
      @extend .note;
      @extend .bd;
}

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

▼SASS

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

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

section {
  @extend %boxBase;
  margin-bottom: 60px;
}

▼CSS

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

.item {
  margin-bottom: 20px;
}

section {
  margin-bottom: 60px;
}