CSS

CSS変数の注意点

CSS変数を使うにあたって注意すべき点について。

  • プロパティ名での利用
  • 単位の扱い
  • calc()を使った小技

プロパティ名での利用

・ CSS 変数はプロパティの値に使えるのであって、プロパティ名のほうには使うことはできません。

・どういうことかというと特定のプロパティをよく使うのでプロパティの方を変数にして使おうと思ってもそもそもプロパティは変数にできないのでうまくいきません。

・例えばCSS変数を—my-propertyとしてcolorを呼び出そうと指定をし、いざh1タグでvar(—my-property):red;  としても反映されないということです。

単位の扱い

・CSS 変数では、あとから単位を追加することはできません。

・たとえば、 :root のほうで --my-margin-left: 32; としてあげて、h1でその変数を使い最後にpx;をつけてもそのpxは反映されずエラーになります。

・もし単位を指定したい場合は、宣言時につけてあげて、CSS変数を使う時に単位を取ってあげる必要があります。

calc()を使った小技

・もしくはどうしてもあとで単位をつけたい場合、小技ではあるのですが、 :—rootのmy-margin-left を 32; にしてあげて、使うときに CSS の calc() 関数を使って--my-marign-left が 32 なので、それに 1px をかけてあげれば、 32px が表現できるはずです。

-広告-

 

 






-CSS