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

4-1 スタイルの継承ができる@extend

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

.btnBase {
	text-align: center;
	margin: 0 0 10px;
	a {
		display: block;
		padding: 10px 20px;
		background: #999;
		color: #fff;
		&:hover {
			background: #ccc;
			color: #333;
		}
	}
}
.imgL {
	float: left;
	margin-right: 15px;
}

@import "extend";

ul.btnList {
	li {
		@extend .btnBase;
	}
}
.item {
	width: 300px;
	.photo {
		@extend .imgL;
		margin-bottom: 10px;
	}
	.text {
		overflow: hidden;
		.btn {
			@extend .btnBase;
			text-align: left;
		}
	}
}

.btnBase, ul.btnList li, .item .text .btn {
  text-align: center;
  margin: 0 0 10px;
}
.btnBase a, ul.btnList li a, .item .text .btn a {
  display: block;
  padding: 10px 20px;
  background: #999;
  color: #fff;
}
.btnBase a:hover, ul.btnList li a:hover, .item .text .btn a:hover {
  background: #ccc;
  color: #333;
}

.imgL, .item .photo {
  float: left;
  margin-right: 15px;
}

.item {
  width: 300px;
}
.item .photo {
  margin-bottom: 10px;
}
.item .text {
  overflow: hidden;
}
.item .text .btn {
  text-align: left;
}

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

// @extend
.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;
}

@extend の連鎖

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

@extend が使えるセレクタ

// クラスセレクタ
.class {
	color: blue;
}

// タイプセレクタ
small {
	color: blue;
}

// IDセレクタ
#selectorID {
	color: blue;
}

// 連結セレクタ
.pd.bd {
	color: blue;
}

// 属性セレクタ
input[type="text"] {
	color: blue;
}

// 擬似クラス
a:hover {
	color: blue;
}

// 擬似要素
p:first-line {
	color: blue;
}

@extend が使えない例

// 子孫セレクタ
.item p {
	margin-bottom: 15px;
}

// 子セレクタ
#main > article {
	margin-bottom: 50px;
}

// 隣接セレクタ
h2 + h3 {
	margin-top: 0;
}

// 間接セレクタ
h3 ~ h3 {
	margin-top: 30px;
}

@extend 専用のプレースホルダーセレクタ

// @extend 専用のプレースホルダーセレクタ
%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 内では @extend は使用できない

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

.btn {
	@extend %btnBase !optional;
}