Stylus コードをリファクタリングした時の話

まだStylus初心者なのですがリファクタリングした時の疑問とかポイントだと思うところとか

まず直す前のコード

main.styl

techtag-style(base-color=gray)
  border-bottom base-color solid 4px

.techtag
  /* lang */
  &.techtag-language, &.techtag-cpp, &.techtag-php, &.techtag-java, &.techtag-javascript, &.techtag-processing, &.techtag-c, &.techtag-ruby
    techtag-style red
  /* metalang */
  &.techtag-metalang, &.techtag-jquery, &.techtag-less, &.techtag-processing-js, &.techtag-coffeescript, &.techtag-sass, &.techtag-stylus
    techtag-style orange
  /* framework */
  &.techtag-framework, &.techtag-codeigniter, &.techtag-bootstrap, &.techtag-slim, &.techtag-pure, &.techtag-materialize, &.techtag-foundation
    techtag-style yellow
  /* lib */
  &.techtag-lib, &.techtag-dxlib, &.techtag-java_servlet, &.techtag-mecab
    techtag-style lime
  /* api */
  &.techtag-api, &.techtag-twitterapi, &.techtag-twitterwebapi, &.techtag-ustreamapi, &.techtag-yahooapi, &.techtag-metroapi, &.techtag-googlemapapi
    techtag-style lightblue
  /* opt service */
  &.techtag-service, &.techtag-googlescript
    techtag-style lightblue
  /* os */
  &.techtag-os, &.techtag-windows, &.techtag-linux
    techtag-style 
  /* db */
  &.techtag-db, &.techtag-mysql, &.techtag-postgresql
    techtag-style green
  /* ide,editor */
  &.techtag-editor, &.techtag-visualstudio, &.techtag-eclipse, &.techtag-netbeans, &.techtag-vim, &.techtag-intellij_idea
    techtag-style orchid
  /* version control */
  &.techtag-admin, &.techtag-git, &.techtag-grunt, &.techtag-composer, &.techtag-npm, &.techtag-gem, &.techtag-bower
    techtag-style darkgray

elzup.comのこの表示部分

techタグに新しいタグを追加するとここ &.techtag-hoge を追加しないといけないのだが
(そもそもカテゴリ毎にCSSクラスを付けてしまえばそんな管理必要なくなるのだが)

とりあえずまずtagの名前を配列で定義して全てループ処理にしようと書き直した

main.styl

  label_name_list = lang metalang lib
  label_lang = language cpp php java javascript processing c ruby
  label_lang_col = red
  label_metalang = metalang jquery less processing-js coffeescript sass
  label_metalang_col = orange
  for cate_name in label_name_list
    for tag_name in label_{cate_name}
      &.techtag-{tag_name}
      techtag-style label_{cate_name}_col

こんな感じ書くとコンパイルエラーがおこる

Stylusでは セレクタやプロパティ名には可変的な書き方ができるけれど
値には使うことが出来ないらしい

つまり

  k = left
  .col-{k}
    border-{k} 3px

これをコンパイルすると

.col-left {
  border-left: 3px;
}

動作するが

  t = col-{k}

これはパースエラーとなる

多次元配列が使いたいが無いらしい

可変変数または多次元配列が使いたいが無いためこんなセパレータを挟んで書き方をしてみた

  glue = __
  labels = label_lang glue label_metalang glue label_framework

  colors = red orange yellow lime lightblue lightblue ghostwhite green orchid darkgray
  i = 0
  for tag_name in labels
    if tag_name = glue
      i = i + 1
    else
      &.techtag-{tag_name}
        techtag-style colors[i]

配列の結合がうまくいかなかった

結局ループ用の関数を追加してこう書いた

techtag-roop(labels color)
  for tag_name in labels
    &.techtag-{tag_name}
      techtag-style color

.techtag
  /* lang */
  label_lang = language cpp php java javascript processing c ruby
  techtag-roop label_lang red
  /* metalang */
  label_metalang = metalang jquery less processing-js coffeescript sass stylus
  techtag-roop label_meta orange
  /* framework */
  label_framework = codeigniter bootstrap slim pure metarialize foundation
  techtag-roop label_framework yellow
  /* lib */
  label_lib = lib dxlib java_servlet mecab
  techtag-roop label_lib lime
  /* api */
  label_api = api twitterapi twitterwebapi ustreamapi yahooapi metroapi googlemapapi
  techtag-roop label_api lightblue
  /* opt service */
  label_service = service googlescript
  techtag-roop label_service lightblue
  /* os */
  label_os = os windows linux
  techtag-roop label_os ghostwhite
  /* db */
  label_db = db mysql postgresql
  techtag-roop label_db green
  /* ide,editor */
  label_editor = editor visualstudio eclipse netbeans vim intellij_idea
  techtag-roop label_editor orchid
  /* version control */
  label_admin = admin git grunt composer npm gem bower
  techtag-roop label_admin darkgray

可変変数または多次元配列が使えないとこれ以上省略方法を思いつかない