CSSを拡張するプリプロセッサを考える

Posted filed under Javascript.

Photo by Aaron Landry

　CSSで、式とかマクロが使えたらなーと思うことがよくあるので、この際だからプリプロセッサを作ろうと思っています。

　文法としては、CSSの構造を大きく変えないで行きます。あくまでプリプロセッサ的な役割で。Sassの様に構文を変えてしまうと、デザイナーの人が取っつき難くなりそうで。

　今のところ、考えている文法の例を下に置きました。誰でも考えそうな所で、includeによる読み込み、ネストをサポート、式と制御構造のサポートを行います。

　このプリプロセッサはサーバサイドで動的に生成するのではなく、一度静的にCSSに変換して使うことを考えています。その為、User agentなど外部からの変数はサポートしません。

　使い方としては、コマンドラインツールによる変換と、Javascriptによる動的な読み込みをサポートする予定です。
開発中は、HTML内に<script src=”ecss_loader.js?test.ecss”></script>と書くことで、サーバに何も導入することなく、動的に拡張されたCSSを読み込むことが出来るようにします。

　文法や機能のアイディア、同じようなプロダクトを知っている！と言う方がいましたら、ぜひコメントお願いします。

例)

%include "common.ecss";
%focus_color = "#4444ff";
%w = 32;
%property x-opacity $value
  opacity: $(value);
  filter: alpha(opacity=$(value*100));
%end

#mailbox {
  width: $(w+2+"px");
  border: 1px solid gray;
  .item {
    width: $(w+"px");
  }
  .focus {
    background-color: $(focus_color);
  }
  .disable {
    x-opacity: 0.5;
  }

%for x in ['red', 'green', 'blue']
  $(".item-"+x): background-color: $(x);
%end

%if debug==1
    .item {
      background: red !important;
    }
%end
}

No related posts.

5 Responses to “CSSを拡張するプリプロセッサを考える”

  1. ursm

    LESS はいかがでしょう。
    http://lesscss.org/

    Sass も「デザイナー層取り込まんといかんねー」と言い出した段階で、将来的には CSS-compatible な文法の導入が予定されています。

  2. masuidrive

    おおお！LESSばっちりですね。
    やりたいことほぼ実装されてるっぽい。

    これのJS実装を作れば、やりたいことは全部できそう。
    自分で作るよりそっちの方がよさそうだなぁ

  3. kotarok

    PHPによる実装でCSS-SSPというのがありますね。
    http://bit.ly/5cB5bS

    作者本人もハイレベルCSS使いなので拡張言語仕様としては、この手の中では最も小慣れてるものの一つ、という印象があります。
    できることはLESSと非常に近いです。LESSの方が後発ですが。

    個人的にはCSSに欠けていて最も望まれるのは抽象化とDRYな再利用の仕組みだと思うので、LESSのようなクラスの再利用のアプローチはCSSerに受け入れやすくかつ喜ばれるものだと思います。

  5. masuidrive

    CSS-SSPはプラグインで拡張できるのがいいですね。

    この手を物をつくるなら、Javascriptで組めば良いと思うんですが、なかなか無いなぁ。
    JSで書いて、コマンドラインツールはRhinoで実行する感じで。

Trackbacks/Pingbacks

  1.  @masuidrive blog – CSSを拡張するプリプロセッサを考える « とっても！　ちゅどん（雑記帳）