Edited at

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

More than 1 year has passed since last update.


背景

css 内で変数定義して計算をしたかったので動作などを確認した。

備忘録的な…

※Chromeでしか動作確認しておりません


はじめに

cssでも変数定義して計算ができる。

下記のような感じ。


変数定義と呼び出し

:root {

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


計算

.c{

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


実施

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

: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

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