KOJIKA17

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

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

カラムの生成

getColumn関数からカラム数などを取得できるようになったので、あとはグリッドシステムに組み込むだけです。

グリッドシステムを自前で作成するのが面倒なので、Bootstrapを一部利用して作成しました。

作成したSCSSファイル

下記のスクリーンショットは、レイアウトとマトリックスが対応している様子です。

マトリックスを変更すると、それにあわせてレイアウトが自動的に変わります。

最後に

レイアウトを視覚的に変更するようにやってみて面白かったです。
ただ普通にやった方がいい気がします。