SASS で function を使ってセレクタを生成する方法

2016/05/12CSS

CSS 拡張のひとつである SASS で function を使ってセレクタを生成する方法について。

通常 SASS の function の戻り値はプロパティの値に使うことが多いかと思いますが、セレクタとしても使用することが可能です（あまり使い途はありませんがプロパティ名にも使うことができます）。具体的には、セレクタの部分に #{関数名(パラメータ)} と記述すれば OK です。

例はこちら。

SASS:

// 先頭を除くすべての要素を指定するためのセレクタを生成する
@function tail($selector) {
  @return '#{$selector}:nth-of-type(n+2)';
}

#{tail('li')} {
  &:before {
    content: "|";
  }
}

生成される CSS:

li:nth-of-type(n+2):before {
  content: "|";
}

このあたりは mixin を使って実現することもできますが、 mixin はさまざまなことができるので、「セレクタの生成だけを行っていることをコード上で示したい」場合なんかにはこの function によるセレクタ生成を行うとよいかと思います。

ちなみに、 , 区切りで複数のセレクタを返す関数を作れば複数のセレクタをまとめて生成することなんかもできます。サンプルはこちら。

SASS:

// ボタンのアクティブなセレクタを生成する
@function button-active($selector) {
  @return '#{$selector}:focus, #{$selector}:hover';
}

#{button-active('forum-submit')} {
  background-color: #335;
}

生成される CSS:

forum-submit:focus, forum-submit:hover {
  background-color: #335;
}

以上です。

SASS 、使えば使うほど便利でよくできているなぁと感心します。