LESSにおけるクラスの拡張

ミックスの欠点は、コードの重複が発生することです。具体的にどういうことか、例を見てみましょう。

次のコードがあるとします:

.mix {
	width: 100px;
	height: 100px;
}
p {
	.mix; 
	color: red;
}

このコードは次のようにコンパイルされ、重複が発生します:

.mix {
	width: 100px;
	height: 100px;
}
p {
	width: 100px;
	height: 100px;
	color: red;
}

次のようにコンパイルされれば、よりコンパクトになります:

.mix, p {
	width: 100px;
	height: 100px;
}
p {
	color: red;
}

これは、指定されたクラスを直接コードにミックスインせずに拡張する &:extendコマンドを使用して実現できます。コードを修正してみましょう:

.mix {
	width: 100px;
	height: 100px;
}
p {
	&:extend(.mix); 
	color: red;
}

次のコードのコンパイル結果を説明してください:

.mix {
	color: red;
	font-size: 20px;
}
p {
	&:extend(.mix); 
	width: 300px;
}

次のコードのコンパイル結果を説明してください:

.mix {
	color: red;
	font-size: 20px;
}
#block p {
	&:extend(.mix); 
	width: 300px;
}

次のコードのコンパイル結果を説明してください:

.mix {
	color: red;
	font-size: 20px;
}
#block p, #block div {
	&:extend(.mix); 
	width: 300px;
}

次のコードのコンパイル結果を説明してください:

.mix {
	color: red;
	font-size: 20px;
}
#block {
	width: 300px;
	
	p {
		height: 100px;
		&:extend(.mix);
	}
	div {
		height: 200px;
		&:extend(.mix);
	}
}

次のコードのコンパイル結果を説明してください:

.mix1 {
	color: red;
}
.mix2 {
	font-size: 20px;
}
div {
	width: 300px;
	&:extend(.mix1);
	&:extend(.mix2);
}