Mixin
ブロック（スニペット）が定義できて、@mixinを使います。
@mixin reset {
list-style: none;
padding: 0;
margin: 0;
}
ul {
@include reset();
}Mixin は@include mixin-name()のような形で、そのセレクタに取り込めます。
/* 変換後 */
ul {
list-style: none;
padding: 0;
margin: 0;
}プレースホルダーセレクター
単純なブロックの時には、Mixin よりプレースホルダーセレクターがいいかもです。これは定義済セレクタを取り込めます。
%reset {
list-style: none;
padding: 0;
margin: 0;
}
ul {
@extend %reset;
}@extendはセレクタをまとめる
@mixin foo {
color: orange;
}
ul {
@include foo();
}
ol {
@include foo();
}
%foo {
color: orange;
}
ul {
@extend %foo;
}
ol {
@extend %foo;
}セレクタが、ul, olになってますね。
// @include
ul {
color: orange;
}
ol {
color: orange;
}
// @extend
ol,
ul {
color: orange;
}注意点
例えば１行のプレースホルダーセレクター 5 つを 100 個のセレクターで使うとどうなるか。これは 100 個のセレクタが 5 回再定義され、かな〜り長いセレクタになります。
3 行以上のものに制限したり、1,2 行なら汎用セレクターを HTML で使いましょう。
Mixin と引数
こっちにしかない機能です。その場で渡した値から、異なるかもしれないブロックを受け取ることができます。
例でget-gutterを定義しました。
$gutter: (
sp: 0 0.3em,
pc: 0 1em
);
@mixin get-gutter($type) {
@if $type != 'sp' and $type != 'pc' {
@error '`sp` か `pc` を指定してください';
}
padding: map-get($gutter, $type);
}
div {
@include get-gutter('sp');
}
@media screen and (min-width: 768px) {
div {
@include get-gutter('pc');
}
}これには$typeという値を渡すことできます。（spかpcに制限）正常なら$gutterから値を取得し、paddingで返します。
/* 変換後 */
div {
padding: 0 0.3em;
}
@media screen and (min-width: 768px) {
div {
padding: 0 1em;
}
}
