CSSフレームワークだってやればできる子

node.js

はてなブックマーク - CSSフレームワーク『BlueTrip』が想像以上にすごい - present

盛り上がってますね。

私のようなCSSの文法はわかるけど効率よくCSS書くにはどうしたらいいの?とか、ぶっちゃけ細かいところめんどくさくて span-24 とか、そりゃやりたくなるよ、という人が多い一方で、「おいおい、そんなことしたら font-size="10.5pt" とHTMLに書いているのとかわらんだろうがー」とご立腹な人もいるわけです。

span-24 とかやるのは「デザインとHTMLを分離する目的で使うのではなくて、単にspan-24って書いて別ファイルにした方が効率的に配信できるじゃん」と割り切ってスルーする、というのもあるんですが、ちょっとカウンタークレームをがんばってみました。

less ですよ、less

要するに、span-24をHTMLファイルに書くんじゃなくて、CSSに書けばいいでしょ、ってことで。がんばります。

まずHTML。

      <link rel="stylesheet" href="/stylesheets/sunrise.css" type="text/css" />
      ...

      <h1 class="logo">
        <a href="/">Sunrise</a>
        <span class="subTitle">Application container framework powered by node.js</span>
      </h1>

これならHTMLとして文句ないでしょう。

次デザイン。BlueTrip じゃなくてすいません。Blueprint のほうが慣れてしまっているので、その screen.css ファイルを /stylesheets/screen.less というファイルに保存して、次に、 /stylesheets/sunrise.less というファイルを作ります。

@import 'screen';

h1.logo {
    .span-24;
}

これで http://xxxx:yyyy/stylesheets/sunrise.css にアクセスすると...

/* -----------------------------------------------------------------------


 Blueprint CSS Framework 1.0
 http://blueprintcss.org

   * Copyright (c) 2007-Present. See LICENSE for more info.
   * See README for instructions on how to use Blueprint.
   * For credits and origins, see AUTHORS.
   * This is a compressed file. See the sources in the 'src' directory.

----------------------------------------------------------------------- */
/* reset.css */
...
h1.logo {
  float: left;
  margin-right: 10px;
  width: 950px;
}

こうなるんですよ。

どうやった?

less というCSSコンパイラを使います。

http://lesscss.org/

これを使うと、CSSを拡張してプログラムっぽく書くことができます。なので、BluePrint の span-24 をマクロ展開するようなクラス定義を作ることができます。これでHTMLに出さずにBluePrint/CSSフレームワークを使うことができる!!

less ってどうやって使うの?

javascript なので、less.js をブラウザに読み込ませて、、、いやいや、そこは node.js で。

node.js上のWebフレームワークである express フレームワークでは標準でlessに対応しています。staticファイルとして .less のファイルを置けば勝手にコンパイルしてCSSの形ではいてくれます。

が、ちょっと問題があって コンパイル時の @import のサーチパスがうまく設定されていない。なので @import 'screen'; と普通にやってしまうとコンパイルエラーになります。

うーんと悩んででた解決策。

var compilers = require('connect/middleware/compiler').compilers;
compilers.less.compile = function(str, fn){
  var less = require('less');
  try {
    var parser = new less.Parser({paths: ['path/to/root/of/your/stylesheet/']});
    parser.parse(str, function(err, root){
      fn(err, root.toCSS());
    });
  } catch (err) {
    fn(err);
  }
}

コンパイラの設定を外側から書き換えてみました。これを起動時に呼び出すようにしておけば、screen.css に書かれた命令をマクロとして自分のCSSで使えますよ。