Sass

共通ブロックの使い回し

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;
}

注意点

例えば1行のプレースホルダーセレクター 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という値を渡すことできます。(sppcに制限)正常なら$gutterから値を取得し、paddingで返します。

/* 変換後 */
div {
  padding: 0 0.3em;
}

@media screen and (min-width: 768px) {
  div {
    padding: 0 1em;
  }
}