Sassの@extend

@extendとは指定したセレクタのプロパティを継承できる機能です。

sass

section.content{
	width: 600px;
	height: 400px;
	padding: 20px 10px;
	border: 4px solid #472122;
	}
	
section.side{
 @extend .content;
}

cssコンパイル後

section.content, section.side {
  width: 600px;
  height: 400px;
  padding: 20px 10px;
  border: 4px solid #472122;
}

このように、同じスタイルを複数のセレクタに反映させることが出来ますが、
かえってソースが長くなってしまいます。
これを先日の@import機能も使ってみて便利な使用を試みます。

sass(_extend.scss)

まず@importする_(アンダースコア)付のscssファイルを作成。
このファイルを同一のスタイルを持つセレクタ用のcssとなります。

.btnBase{
 text-align: center;
 margin: 0 0 10px;
 
  a{
	display: block;  
	padding: 10px 20px;
	background: #999;
	color: #FFF;
	}
	
}

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

scss(style.css)

つづけて適用したい複数のセレクタに@extendでスタイルを継承させます。

@import "_sytle_m.scss";

ul.btnList{
	li{
	  @extend .btnBase;
	  }
}


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

scss(style.css)

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

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

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

これで同じスタイルを持つ複数のセレクタがグループ化されました。
cssだけで記述すると複雑化して分かりにくく、管理も大変ですが
scssにすることでどのセレクタに同一のスタイルが適応してるかどうかが一目瞭然になります。