＠extendの使い方
.hoge1 {
margin:10px 0;
padding:5px;
}
.hoge2{
@extend .hoge1;
padding:0;
}
とすることによって、hoge2はhoge1の
margin:10px 0;
padding:5px;
が適応されつつ、そのあとに
padding:0;
が適応されるということになる。
まさに継承、、
mixinと似ているが、mixinは
・グルーピングをしない
・引数を使うことができる
という違いがある
sassでこう記述すると
@mixinhoge($value:5px){margin:20px0;padding:$value;}.hoge1{@includehoge;}.hoge2{@includehoge(0);}これがcssでは
.hoge1{margin:20px0;padding:5px;}.hoge2{margin:20px0;padding:0;}こうなる。
引数を指定してあげればスタイル描くの楽そうですね。
