Hatena::Groupsubtech

おれ ここ めも かきなぐる おまえ ここ よむ なぐる

 | 

February 10, 2011

SassというかSCSS

18:40

もうちょっとSassについて書いてみる。というかSCSS。

例えばこういうHTMLがあるとする。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Simple 2-Column Template</title>
  </head>
  <body>
    <header>
      <h1>Simple 2-Column Template</h1>
    </header>
    <div id="contents">
      <article>
        <h1>Article Title</h1>
        <p>Article contents</p>
      </article>
    </div>
    <aside>
      <h1>Sidebar Title</h1>
      <ul>
        <li>sidebar menu item</li>
      </ul>
    </aside>
    <hr>
    <footer>
      <address>Site Footer</address>
    </footer>    
  </body>
</html>

普通のHTML5なウェブページです(HTML 4.01ではheaderやarticleなどのタグ名をクラス名にでもすれば良い)。

で、グリッドシステムをSassのSCSSで定義する。面倒なのでここでは使うレイアウト絡みのものだけ定義する。定義名はBlueTripの完コピ(＋α)で、@mixinでやる。

@mixin column {
  float: left;
}

@mixin span-6 {
  width: 230px;
}

@mixin span-17 {
  width: 670px;
}

@mixin span-24 {
  width: 950px;
}

@mixin colborder {
  padding-right: 24px;
  margin-right: 25px;
  border-right: 1px solid #eee;
}

@mixin last {
  margin-right: 0;
}

@mixin space {
  background: #fff;
  color: #fff;
}

これを参照するように書けば良い。

body {
  @include span-24;
  margin: 0 auto;
}

body > header {
  @include column;
  @include span-24;
}

#contents {
  @include column;
  @include span-17;
  @include colborder;
}

body > aside {
  @include column;
  @include span-6;
  @include last;
}

body > hr {
  @include space;
}

body > footer {
  @include column;
  @include span-24;
}

でコンパイルすると、

body {
  width: 950px;
  margin: 0 auto; }

body > header {
  float: left;
  width: 950px; }

#contents {
  float: left;
  width: 670px;
  padding-right: 24px;
  margin-right: 25px;
  border-right: 1px solid #eee; }

body > aside {
  float: left;
  width: 230px;
  margin-right: 0; }

body > hr {
  background: #fff;
  color: #fff; }

body > footer {
  float: left;
  width: 950px; }

となりちゃんとグリッドレイアウトが作れます。

リセットやデフォルトのスタイルはBluetripからコピー。SCSSではCSSを普通に書いて全く問題ないのでコピペしてきても壊れるとかはない。せいぜい順番を気にするくらい。

で、カラム幅変えたいなーという場合は、新たに@mixin作ってもいいし、既存の@mixinを編集してもいい。

@mix-in span-14 {
  width: 550px;
}

@mix-in span-9 {
  width: 350px;
}

反映には当然参照を編集。

#contents {
  @include column;
  @include span-14;
  @include colborder;
}

body > aside {
  @include column;
  @include span-9;
  @include last;
}

HTMLを編集することなくカラム幅の変更が完了。仮にグリッドシステムの@mixinが予め完全に定義してあるのなら、手間はまったく変わらない。

今度はレイアウトを変えてみようかみたいな時も@mixinの定義から。

@mixin flipcolumn {
  float: right;
}

@mixin flipcolborder {
  padding-left: 24px;
  margin-left: 25px;
  border-left: 1px solid #eee;
}

で参照を編集。

#contents {
  @include flipcolumn;
  @include span-18;
  @include colborder;
}

これまたHTMLを編集することなくレイアウトの変更が完了。ここらへんになるとCSSの知識が前提になるが、そういうひとがちゃんとSCSSでのテーマ的なものを作ってくれるかもしれないし、既存のグリッドシステムとかからの移行はそれほど難しくはない。

最後にCSSのサイズとファイル数的なメリットを。最終的なCSSには様々な定義しただけスタイルは組み込まれないので、必要最小限のCSSが出来上がるはず。他のグリッドシステムのように.span-1とか使わないものが残るとかそういう事もない。そういうのでもちゃんと使われてない奴削除するツール使えば良いじゃんみたいな話もあるけど、Sassの--watchでサクサクCSSになって出てくるのと比肩するツールはないと思う。また、多くのCSSフレームワークというかベーステーマというかそういったもののようにとりあえずベースとなるCSSファイルを読ませ、細かいカスタマイズは別ファイルでというようになっているとHTTPリクエストがひとつ増える。Sassの場合はそれらを拡張された@importでマージしてしまうように書くこともできる。

@import "style";

と書くだけ。これでstyle.cssとかがなければ_style.scssを探し、みつかればその中身をそのままマージしてくれる。既存のCSSをインポートしたいというような時もSCSSはCSSと互換性があるので、ファイル名を変更する作業だけ。このように複数のCSSファイルをまとめることもできるので、最終的にCSSが一つだけで幸せな感じ。

結構適当に書いたのであとで手直しを一杯するかもしれない。

コメント
 |