cssコンパイラを自作してみた

サイトデザインの技術的な部分について、ようやく取りかかることにしました。
要は、htmlとかcssとか、その辺の上手な活用法についてです。
　
普段、基本的には、なるべくIDとクラスに対してスタイル指定する様にしています。
　
クラスがIDと異なる特徴として、以下の２つがあります。
　
・同じクラスの要素が複数存在可能。（同じIDの要素は、複数存在は推奨されない）
・１つの要素に複数のクラスを指定可能。
　
こんな特徴があるものだから、クラスは以下の様な使い方をします。
　
A. ２個以上登場しうる同じ意味を持つDOMの、デザイン指定
B. 動的に意味が変化するDOMの、デザイン指定（addClassやremoveClassでON/OFFする）
C. 頻度の高い部分デザインの指定を、DOMに対して補助的に行う
　
AとBは正しい使い方だと思うのですけれども、
Cの用途で使おうとすると、html側にデザインを持っていることになります。
　
もう何年も前から、この辺が気に入りませんでした。
　
しかし、CにはCの需要があるというか。
同じことを２度書くべきではないという意味において、Cにも正当性があります。
　
たとえばヘッダ領域／サイドメニュー領域／ボディ領域／フッタ領域がそれぞれID指定divタグで定義されている時、このうちのサイドメニュー領域とフッタ領域のみ、角を丸くしたいとします。
　

border-radius:5px;

　
このとき、上記の指定をcss側に対して、サイドメニューとフッタのIDに対して追加したとします。
　
しばらくして、5pxではなく7pxに変更したくなったとします……ここで２箇所変更するのが、私は嫌です。
　
しかしながら、角丸のクラスを定義して、html側でサイドメニュー領域とフッタ領域に角丸クラスの指定を書くのも、デザインをhtml側に書くことになるので、嫌です。
　
じゃあ、どうすれば嫌じゃないかというと、css側の各スタイル指定が、mixinなり多重継承なりを指定可能であれば、これらの問題は解決します。
　
そこでちゃちゃっと、cssコンパイラを作りました。
　
たとえば以下の様なcssもどきを用意します。
　

@charset "utf-8";

$aa {
　　bb: cc;
　　dd: ee;
}

$ff {
　　dd: gg;
　　hh: ii;
}

#jj {
　　$import: aa, ff;
　　kk: ll;
}

　
このcssもどきをcssコンパイラに通すと、以下の様なcssを吐き出してくれます。
　

@charset "utf-8";

#jj {
　　bb: cc;
　　dd: gg;
　　hh: ii;
　　kk: ll;
}

　
ほんのひと手間、こういうものを作っておくことで、色々と楽になるんじゃないかなぁと思いました。