CSSでのvar + calcでの計算方法

背景

css 内で変数定義して計算をしたかったので動作などを確認した。
備忘録的な…
※Chromeでしか動作確認しておりません

はじめに

cssでも変数定義して計算ができる。
下記のような感じ。

変数定義と呼び出し

:root {
  --w: 30px;/*変数定義*/
}
.c{
  width:var(--w);/*呼び出し*/
}

計算

.c{
  width:calc(100% - 10px);
}

実施

この２つを利用すれば変数計算で行けるはず！

:root {
  --p1: 10px;/*変数定義*/
  --n1: 10;/*変数定義*/
}
.c{
  width:calc(var(--p1));        /*var:10px        ok*/
  width:calc(var(--p1) * 10);   /*var:10px * 10   ok*/
  width:calc(var(--p1) * 10px); /*var:10px * 10px ng*/
  width:calc(var(--p1) + 10px); /*var:10px + 10px ok*/
  
  width:calc(var(--n1));        /*var:10          ng*/
  width:calc(var(--n1) * 10);   /*var:10   * 10   ng*/
  width:calc(var(--n1) * 10px); /*var:10   * 10px ok*/
  width:calc(var(--n1) + 10px); /*var:10   + 10px ng*/

  width:calc(var(--n1) * var(--p1));           /*var:10 * var:10px ok*/
  width:calc(var(--n1)*1px + var(--p1));       /*(var:10 * 1px) + var:10px ok*/
  width:calc(calc(var(--n1)*1px) + var(--p1)); /*(var:10 * 1px) + var:10px ok*/
  width:calc(var(--n1)*1px + var(--n1)*1px);             /*(var:10 * 1px) + (var:10 * 1px) ok*/
  width:calc(calc(var(--n1)*1px) + calc(var(--n1)*1px)); /*(var:10 * 1px) + (var:10 * 1px) ok*/

  width:calc(10%-10px);         /*    10% - 10px  ng*/
  width:calc(10%+10px);         /*    10% - 10px  ng*/
  width:calc(10px + 10px);      /*    10px + 10px ok*/
  width:calc(10% + 10px);       /*    10% + 10px  ok*/
  width:calc(10% - 10px);       /*    10% - 10px  ok*/
}

結論

1. +,-をするときは前後にスペースが無いと上手く動かない
2. pxなどの単位がなければ計算できない場合がある(+,-など)
3. 計算はcalcで囲わなくてもOK

個人的に１でめっちゃ詰まった…