@extendと@mixinの違い

Yukimi Sato 155views 更新:2014年7月2日

@extend

/*ベースとなるクラス例*/
.red{
color:red;
}

/*記述方法*/
a{
@extend .red;
}

/*出力内容*/
a{
color:red;
}

 

@mixin

/*ベースとなるmixin例*/
@mixin red{
color:red;
}

/*記述方法*/
a{
@include red;
}

/*出力内容*/
a{
color:red;
}

@extendは引用したいクラスを読み込んで使用します。
(専用でクラスを作るのではなく、既存のクラスを引用するという考え方です)
@mixinは設定として予め別途記述しておいたmixinを読み込んで使用します。

@extendの方がより汎用的で使いこなせるとソースがスッキリとします。

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません