html2slimをついでに作った

rails css

Serverless Frameworkが有償化されるのでrailsに置き換えてみた - rochefort's blog
先日、html2slim を作り替えたという話をしたのですが、同じような実装なのでついでに slimに置換するHTML2SLIM を作ってみました。

ドメインは分けてnginxでそれぞれ受け付けて、1つのRails Application にproxyするようにしています。

CSS周りが便利で新鮮でした

最近のcssはnestもできるし、変数も扱えるしで、scss/sass なくても十分使える印象です。 今回ベースカラーを変数を使って変更するようにしてみました。

やり方

Rails

Railsでbodyタグにカラーコードを埋め込むようにします。

<body style="--theme-color: #d47c00">

css

cssの方は、varを使って取り出すことができ、その値を変数としてセットすることができます。

/* bodyのstyle属性からtheme-colorを取得し、custom propertyにセット */
body {
  --base-color: var(--theme-color);
}

利用する側は、普通に変数として扱えます。

.header {
  background-color: var(--base-color);

ついでに

ベースカラーからちょっと色味を変えたいというような時も color-mix を使うことで実現できます。

  &:hover {
    color: color-mix(in srgb, var(--base-color) 30%, black);
  }

まとめると

cssではbase-color変数を使った共通の定義だけしておいて、 あとはサーバーサイドでどの色を使うかというのをするだけで cssの設定を増やすことなく、複数パターンの出し分けができてしまいます。 めちゃ便利。