Sassで視覚的にレイアウトを変更してみる

2015-05-22

Almost Profoundの「Sass Pixel Art」という記事で、レンダリング用のマトリックスからアイコンを作成する方法が紹介されていました。
この方法を応用すれば、Sassで視覚的にカラムを変更できるのではないかと思ったので、やってみました。

マトリックスのルール

「Sass Pixel Art」で紹介されていたマトリックスは、スクリーンショットのような感じで紹介されています。

Sassを利用して、視覚的にアイコンを作成できるように工夫されています。
ただこのマトリックスをよく見てみると、何かに似ています。

2015年3月にWorking Group Noteに移動してしまった「CSS Template Layout Module」です。

この仕様のEXAMPLE 43を見ると、「Sass Pixel Art」で紹介されていたマトリックスに似ているのがわかります。

これらを元にした視覚的にレイアウトを変更するためのマトリックスが下記のコードです。

// Grid Pattern
$grid: (
  index:(
    (0 0 a a a a a a a b b 0)
    (c c c c c c c c c c c c)
    (d d d d d d e e e e e e)
  ),
  welcome:(
    (a a a a a a a a a a a 0)
  )
);

CSSフレームワークのグリッドシステムを利用することを想定して、1行に12カラムが入ることを想定しています。

また英文字が、対応するカラム。0は、空白を表します。
CSS Template Layout Moduleのように、空白は"."にしたいところですが、うまく動作しないので0で表しています。

マトリックスからカラムを取得する

マトリックスからの処理は、functionで対応しました。

@function getColumn($module, $type) {

  $column: 0;
  $prevOffset: 0;
  $row: map-get($grid, $module);
  $offset: 0;

  @each $item in $row {
    @if(length($item) > 1) {
      $offset: 0;
    }
    @each $t in $item {
      @if(type-of($t) == number) {
        $offset: $offset + 1;
      }
      @else if($t == $type) {
        $column: $column + 1;
        $prevOffset: $offset;
      } @else {
        $offset: 0;
      }
    }
  }

  @return $column, $prevOffset;
}

作成したgetColumn関数は、$moduleに$grid変数の1つ目(index, welcome)を、$typeに$grid変数の2つ目の英文字を入れます。

なおgetColumn関数からは、カラムとオフセットがリストで返るようにします。返り値を単独で利用したい時は、nth関数で取得できます。

@debug 'column, offset:' getColumn(index, a);
@debug 'column:' nth(getColumn(index, a), 1);
@debug 'offset:' nth(getColumn(index, a), 2);

// 出力結果
// DEBUG: "column, offset:" (7, 2)
// DEBUG: "column:" 7
// DEBUG: "offset:" 2