style.js

.className = {
  text-align: center,
  color: #000,
  &.hasClassName: {
    color: red
  }
};

Sassで書いてもツラいところは同じことになりそうですね＞＜
変数とテンプレートリテラル使って展開したら短く書けそうですね

e.g.

var child = function (n) { return `nth-child(${n})`; };
var after = "::after";
var notChild = function (n) { return `not(:nth-child(${n}))`; };

.className = {
  `.child${child(n)}`: { prop : value },
  `.child${after}`: { prop : value }
  `.child${notChild(n)})`: { prop : value }
};

CSSの文脈に限り、テンプレートリテラルに必要な ` を省略する機能も提供できそう

LGTM！
変数を使うのはありですねー。でもJSってオブジェクトのキー側にfunctionは使えるんでしたっけ？
Sassだとインターポレーションでセレクタやプロパティに変数をうめこむのができますけども。

可能にします 😼

この構文をトランスパイルしてJSにして、実行結果のObjectをCSSにするイメージなので
なんとかできそう。あとは良い名前を考えてじわじわやっていきます〜

可能にします 😼

ｶｯｺｲｲ...///