More than 3 years have passed since last update.

@extendの使い方

Posted at 2020-12-13

＠extendの使い方

.hoge1 {
margin:10px 0;
padding:5px;
}
.hoge2{
@extend .hoge1;
padding:0;
}

とすることによって、hoge2はhoge1の

margin:10px 0;
padding:5px;

が適応されつつ、そのあとに


padding:0;

が適応されるということになる。

まさに継承、、

mixinと似ているが、mixinは
・グルーピングをしない
・引数を使うことができる
という違いがある
sassでこう記述すると


@mixin hoge($value : 5px) {
margin:20px 0;
padding:$value;
}
.hoge1{
@include hoge;
}
.hoge2{
@include hoge(0);
}

これがcssでは


.hoge1 {
margin: 20px 0;
padding: 5px;
}
.hoge2 {
margin: 20px 0;
padding: 0;
}

こうなる。

引数を指定してあげればスタイル描くの楽そうですね。