lessからstylusへ変換（Bootstrap）

Bootstrap の variables を編集したくて、
less ファイルを普段つかっている stylus に変換しようとした記録です。
結果から言うと、「stylus に変換しないほうがよい」になります。。

less → stylus の変換

less2stylusを利用

$ npm install -g less2stylus

これで

$ less2stylus styles.less > styles.styl

で less ファイルをうまいこと stylus ファイルに変換してくれます。
Bootstrap のすべての less ファイルを一括で処理したかったので

$ mkdir stylus
$ for file in less/*.less; do less2stylus "$file" > "./stylus/$(basename "$file" .less).styl"; done;

で一括変換。

stylus 実行でこける箇所を修正

less で深い参照をしているところは less2stylus でもうまく変換できないようだったので

mixin.styl

  .shorthand
    shorthand()
  serif(size=baseFontSize, weight=normal, lineHeight=baseLineHeight)
    @extend .font > #family > .serif
    font-shorthand(size, weight, lineHeight)
  .serif
    serif()
  sans-serif(size=baseFontSize, weight=normal, lineHeight=baseLineHeight)
    @extend .font > #family > .sans-serif
    font-shorthand(size, weight, lineHeight)
  .sans-serif
    sans-serif()
  monospace(size=baseFontSize, weight=normal, lineHeight=baseLineHeight)
    @extend .font > #family > .monospace
    font-shorthand(size, weight, lineHeight)

を

mixin.styl

  .shorthand
    shorthand()
  serif(size=baseFontSize, weight=normal, lineHeight=baseLineHeight)
    font-family serifFontFamily
    font-shorthand(size, weight, lineHeight)
  .serif
    serif()
  sans-serif(size=baseFontSize, weight=normal, lineHeight=baseLineHeight)
    font-family sansFontFamily
    font-shorthand(size, weight, lineHeight)
  .sans-serif
    sans-serif()
  monospace(size=baseFontSize, weight=normal, lineHeight=baseLineHeight)
    font-family monoFontFamily
    font-shorthand(size, weight, lineHeight)

に修正。

stylus の codehighlight がうまくいかないのですが、
下記のような子セレクタをつかって深い階層を見に行っているところでつまづきます。

@extend .font > #family > .monospace

そしてもう一箇所。

navbar.styl

.navbar-static-top .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container
  grid > .core > .span(gridColumns)

を下記に修正。

navbar.styl

.navbar-static-top .container,
.navbar-fixed-top .container,
.navbar-fixed-bottom .container
  width: ((gridColumnWidth) * gridColumns) + (gridGutterWidth * (gridColumns - 1));

まとめ

これで stylus から CSS を出力できるようになったのですが、
実際の bootstrap.css と差し替えて使うと細かい表示くずれが発生してしまいました。

Bootstrap をつかうなら less のまま、か
stylus でフレームワークを使うなら 別のものを使うのが良さそうです。
残念！