sass 便利です

css extensionのsassをこれまた最近仕事で使う事になったのですが、便利ですし、おもしろいです。

sassでは変数が使えるので、ローカルファイルでいろいろ変数を使い回したり、グローバル変数を設定して@importで設定ファイルを読み込んだりと使い方ができます。ただRubyで使用する場合など、変数の設定はrequireでは読み込めないので、@importする必要があるようです。これはちょっと不便ですが…

OOPのようにcssを使う方法としてsassが使えます。

@extendがどちらかというと継承に使えるツールで、一番下のレイヤーcssを作っていく際など、下の様にまずプロトタイプを作ってクラスにさせて作成するというような事ができます。

%layer
  width: 100%

#header, #contents, #footer
  @extend %layer

機能追加をする Ruby でいうモジュールのような機能はミックスインで利用できます。例えばclearfixやしましまビジュアルをある要素に追加したいという場合はまずミックスインを定義してそれを要素にインクルードします。ミックスインの定義は下の様にします。

=clearfix
  *zoom: 1
  &:after
    content: "."
    display: block
    clear: both
    height: 0
    visibility: hidden

このミックスインをインクルードしたい要素にインクルードします。

#header, #contents, #footer
  +clearfix

以上が私としてはレイアウトの定義に使えるツールだったのですが、色や背景画像などのテーマを作成するにはどうしたら良いかと暫く悩んだのですが、結局関数の定義の機能を使用する事にしました。他に良いアイデアがあれば教えてほしいですね…

関数の定義は@functionを使って'whiteTheme'と'blackTheme'テーマのパーツ毎に引き出してくる形にしました。

@function themeParts( $scope, $theme: blackTheme )
  $base_bg_color = #000
  $base_font_color = #fff
  @if $theme == whiteTheme
    $base_bg_color = #fff
    $base_font_color = #000

  @if scope == base_bg_color
    @return $base_bg_color
  @if scope == base_font_color
    @return $base_font_color

以上がテーマのパーツを選んでくる関数のベースで、これを実際のテーマに入れていきます。ここで@eachを使います。

@each $theme in blackTheme, whiteTheme
  body.#{$theme}
    background: themeParts(base_bg_color, $theme)
    color: themeParts(base_font_color, $theme)

これでsassをコンパイルした時にbody.blackThemeとbody.whiteThemeのそれぞれのcssが作成されて、テーマ分けができます。随時背景画像やネストされたクラスなど同様に登録していきます。

sassは素のcssよりかなり機能が充実しているので、技に溺れて不要なツールを使いすぎてしまう可能性があるのですが、ちゃんと使えばかなりすっきりしたコードにリファクタリングできると思います。

皆さん楽しくsassを使ってみてください。