CSS変数について


  • 宣言の仕方はハイフンを2つつける
--my-color: orange;
  • 使い方はvar関数を使う
color: var(--my-orange);
  • 複数要素で同じ変数を使用したい場合は共通の親要素で変数を定義する
  • HTML全体で同じ変数を使用したい場合は:root要素で定義してあげる
  • 値には適用できるが、プロパティ名には適用できない

  • 単位を使う場合① 宣言に単位までつける

--my-margin:32px;
  • 単位を使う場合② calc関数を使う
margin-left: calc(var(--my-margin) * 1px);