スタイルシートはクラスやIDの仕方が多彩であるため、デザイナーによって記述が大きく異なります。その結果、更新を重ねるたびに複雑で分かりづらいものになっていきます。 そんな煩雑化を防ぐためにSassやLessを使ってプログラマブルに管理するのが一般的になっています。今回はさらにプログラマブルに、JavaScriptでスタイルシートを記述するDescartesを紹介します。

Descartesの使い方

Descartesの例です。JSONを使って記述するのがポイントで、関数を使ったりMix-inを使うこともできます。

var reset = {"margin": 0,
  "padding": 0,
  "box-sizing": "border-box"
};
var rand_angle = function() {
  return Math.round(Math.random() * (180) - 90);
};
var rand_rgba = function() {
  return "rgba("+[255,255,255].map(function(x) {
    return Math.round(Math.random() * x);
  }).join()+", 1)"
};

new Descartes({ // Just put descartes.js in the <head> tag
  "html": {
    "_mixins": reset, // Reuse CSS rules with mixins
    "body": { // Nest selectors just like in Sass and Less
      "_mixins": reset,
      "_listeners": [
        [window, "click"],
        [window, "touchstart"]], // Bind events...
      "background": function() {
        return 'linear-gradient('
          + rand_angle().toString() + 'deg,'
          + rand_rgba() + ','
          + rand_rgba() + ')'
      } // ...to set dynamic property values when they fire!
    }
  }
})

上記の設定をの場合、最初の表示では次のようになります。色は違うかもしれません。

しかしもう一度適用するとまったく異なる色になります。

このように毎回色を変えるのはもちろん、ユーザのアクションによってスタイル設定をダイナミックに適用するといったことが可能になります。これまで以上にスタイルシートをダイナミックなものにしてくれるでしょう。

DescartesはJavaScript製のオープンソース・ソフトウェア(MIT License)です。

Descartes JonHMChan/descartes: Descartes | Write CSS in JavaScript