思ったこと

Bootstrapを見ていて

<div class="raw">
  <table class="col-6">...</table>
  <table class="col-6">...</table>
</div>

なんて感じでデザインしたのに，デザイン見た人から「左のテーブルだけもう少し横幅広くならない？」なんて言われて

<div class="raw">
  <table class="col-8">...</table>
  <table class="col-4">...</table>
</div>

にせよとか，修正するの，すっげぇ面倒だなぁと思った。

できたらいいな

- var left = 6;
- var right = 12 - left;
.raw
  table.#{left}
  table.#{right}

ひとまずの結論

いける

- var classstr = "hogeClass";
- var left=6, right=12-left;
- var classAttr = function(left){return {left:left, right: 12 - left};}(6);

.raw
  table(class="#{classstr} #{classAttr.left}");
  table(class="#{right}");
  table(class="#{classAttr.right}");

いけない

- var classstr = "hogeClass";
- var classAttr = {left:left, right: 12 - left};

.raw
  table.#{classstr}
  table."#{classstr}"
  table(class="#{classAttr.right}")  //← table(class="NaN")になる

最後のヤツがうまくいかないのは，ちょっと意外だった。

jadeにjsロジックをベタ書きするのは，あんまり美しくないような気がするので，expressと組み合わせて，
routeから変数をrenderで引き渡してやれば，なんとなくそれっぽいのが書けそうな気がしてきた。

もしかしたらmixinとか使って，もう少し素直に書けるのかも。その辺は継続調査。

追記

二番煎じだった。しにたい。
https://teratail.com/questions/2947