2011-11-02

SCSSでグリッド・オーバーレイを簡単に

少し前に書いた::before擬似要素とCSSグラデーション、pointer-eventsプロパティを利用したグリッド・オーバーレイをSCSSのミックスインとしてみました。まぁグリッドじゃなくてカラムですけどね！

@import "grid-overlay";

body {
  @include grid-overlay(60px, 20px);
}

という風にインポートしてカラムと溝(カラムとカラムの間)の幅を引数として書くだけです。この例では960.gsと同じ間隔のグリッドを表示します。引数を省略した場合はカラムが48pxで溝が16pxのグリッドになります。body要素以外でも使えると思いますが、あんまり意味はないと思います。

リファレンスにもしっかり書いてありますが、ミックスインでも普通にネストしてセレクタを書くことが出来るので、

@mixin foo() {
  &::before {
    content: "Before Pseudo Element!";
  }
}

とか出来ることは憶えておくとちょっと便利です。