More than 1 year has passed since last update.

ScalaCSSのちょっとした使い方について

Posted at 2023-06-20

ScalaCSSについて嵌ったところをメモ的に投稿しておきます。

環境

Java : OpenJDK 17.0.7
Scala : 3.3.0
sbt: 1.9.0
ScalaCSS: 0.8.0-RC1

ScalaCSSは"%%"や"px", "width"や"height"などのCSSの属性や表記について、定義されていて、

"div" - (
  width(200 px),
  height(100 px)
)

などと書けたりして、最初のチュートリアル的なコードでは、
この書き方を習います。

ところが、
"rotate"とか"deg"とかいったものは定義がなく、
"transform"とか"box-shadow"とかは、使い方がいまいち不明です。

そういう時に := を使って、書き込んでやります。
例を挙げると

  "div" - (
    transform := "rotate 1s steps(8) 0s infinite"
    boxShadow := "0 -30px 0 #fee"
  )

といったような具合です。

ドキュメントにもtypedなデータがまだ用意されていない場合は:=を使って設定します、というようなことが書いてありますね。

以上、ちょっとしたScalaCSSの使い方でした。