- 2010-01-20 (Wed) 3:18
- 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
}
Related posts
- Newer: iPadの新規性はタブレットサイズのユーザインタフェース
- Older: Geohashのアルゴリズム
Comments:5
- ursm 10-01-20 (Wed) 3:45
-
LESS はいかがでしょう。
http://lesscss.org/Sass も「デザイナー層取り込まんといかんねー」と言い出した段階で、将来的には CSS-compatible な文法の導入が予定されています。
- masuidrive 10-01-20 (Wed) 4:13
-
おおお！LESSばっちりですね。
やりたいことほぼ実装されてるっぽい。これのJS実装を作れば、やりたいことは全部できそう。
自分で作るよりそっちの方がよさそうだなぁ - kotarok 10-01-20 (Wed) 4:33
-
PHPによる実装でCSS-SSPというのがありますね。
http://bit.ly/5cB5bS作者本人もハイレベルCSS使いなので拡張言語仕様としては、この手の中では最も小慣れてるものの一つ、という印象があります。
できることはLESSと非常に近いです。LESSの方が後発ですが。個人的にはCSSに欠けていて最も望まれるのは抽象化とDRYな再利用の仕組みだと思うので、LESSのようなクラスの再利用のアプローチはCSSerに受け入れやすくかつ喜ばれるものだと思います。
- Takazudo 10-01-20 (Wed) 4:43
-
Nicole Sullivan という方が、Object Oriented CSS っていうスライドの中で、
http://wiki.github.com/stubbornella/oocss/
こんな風にかけたらいいのに
http://dl.dropbox.com/u/268240/static/somethingToTellPeople/css.txt
言ったようなことを書かれていました。
ひとまとまりのCSSの組み合わせ
を継承できるようになればいいのにといったような内容です。 - masuidrive 10-01-20 (Wed) 4:47
-
CSS-SSPはプラグインで拡張できるのがいいですね。
この手を物をつくるなら、Javascriptで組めば良いと思うんですが、なかなか無いなぁ。
JSで書いて、コマンドラインツールはRhinoで実行する感じで。
Trackbacks:1
- Trackback URL for this entry
- http://blog.masuidrive.jp/index.php/2010/01/20/css-enhancer/trackback/
- Listed below are links to weblogs that reference
- CSSを拡張するプリプロセッサを考える from @masuidrive blog
- pingback from @masuidrive blog – CSSを拡張するプリプロセッサを考える « とっても！ ちゅどん（雑記帳） 10-01-20 (Wed) 9:18
-
[...] @masuidrive blog – CSSを拡張するプリプロセッサを考える @masuidrive blog – CSSを拡張するプリプロセッサを考える [...]