あまり使う場面がなさそうだが、どうなのだろうか。

どのように使えるか、あまり思いつかなかったが作って見た。

 

See the Pen by rea-jin (@rea-jin) on CodePen.

 

 

変数を使える①

sassなどのcssプリプロセッサで、変数が使えるように、calc()は関数なので、その中で変数を使える。

クラスtitleを見ると

--height: 50px;
  height: var(--height);

以上のようになっており、宣言は、ハイフン２つ、使うときは、var()の中に書く。

 

 

vw,vh,%,pxなどの単位を使える②

font-sizeのところで、以下のようにしている。これは、ルート要素であるhtml要素に対するフォントサイズ1remを、1/30していることになる。

画面幅に対して、文字サイズが変更される。

font-size : calc(100vw/30);

参考

https://coliss.com/articles/build-websites/operation/css/how-calc-works-by-ire.html

 

 

四則演算できる③④

カラムを親要素に対して1/3にしている。

 width : calc(100% / 3) ;

ボタン幅を、親要素の幅から20px小さくしている。

足し算、引き算の場合、半角スペースを前後につける。

width : calc(100% - 20px) ;

 

 

変数は、他のセレクタでは使えない⑤

あるセレクタ内で宣言した変数は、他のセレクタでは使うことができない。

この点はやはりsassの方が使いやすいと思われる。

@keyframes rotation {
/*    0%{ transform:rotate(0);} */
/*  ⑤  */
  0%{ --degA=0deg;
    transform:rotate(var(--degA));}
  100%{ transform:rotate(1turn); }
}

0%のところで、変数 degAを0度としているが、これを100%のセレクタ内で、呼び出すことはできない。