コンパイルしてJavaScriptに変換する系統の言語としてはDartやCoffeeScriptなどが知られています。同様にスタイルシートについてもSassやScss、LESSといった代替記法が存在します。 今回紹介するMythもその一つで、スタイルシートの代替記法なのですが、多数の機能がある訳ではなく最も必要とされるであろう機能だけを提供しているのが特徴です。 まずインストールから。npmを使ってできるのですぐに導入できます。

$ npm install -g myth

続いて対応している記法を紹介します。まず変数。 :rootで変数を定義し、それをvar(aaa)といった形で使っています。数字や色の定義が使えます。 変数をさらにcalcという関数に渡すことで計算処理を実現しています。 ちょっとしたところで-webkit-*表記を自動補完してくれます。 例として以下のような記述になります。

:root {
  var-green: #a6c776;
}

a {
  color: var(green);
  font-variant: all-small-caps;
  transition: color 1s;
}

a:hover {
  color: color(var(green) shade(20%));
}

::placeholder {
  opacity: .4;
  transition: opacity 1s;
}

:focus::placeholder {
  opacity: .2;
}

LESSなどは一度習得すれば便利な記法だと思うのですが、書き方が異なるために慣れるまでの学習コストが大きいという問題があります。Mythは素のスタイルシートに近く、後で一括変更が面倒な色の定義やカラーパターンに応じた濃淡の使い分けなどが簡単に定義できるのが便利そうです。 実際コマンドも素のCSSであるかのように扱います。もちろんmcssといった感じに独自の拡張子を割り当てることもできるでしょう。

$ myth input.css output.css

学習コストが低い、それでいて最も必要そうな機能は揃っているスタイルシート記法として使える場面があるのではないでしょうか。 Mythはnode/JavaScript製、MIT Licenseのオープンソース・ソフトウェアです。 Myth - CSS the way it was imagined. segmentio/myth