web-dev-qa-db-ja.com

css calcの無効なプロパティ値

このCSS計算関数が機能しない理由を誰かに教えてもらえますか？ Chromeで要素を検査すると、「無効なプロパティ値」と表示されます。

width: calc((100vw - 14px * 2) / (270px + 11px * 2));
csscss-calc
12
Josh

pxのような単位で除算することはできません。 数 のみです。

8
Stephen Thomas

今後のGoogle社員向け：

DevToolsの役に立たない「無効なプロパティ値」メッセージは、+-/ *演算子の周りに空白が必要であることを意味するだけかもしれません。

正しくない（無効なプロパティ値）：

width:calc(100vh-60px)  <== no spaces around minus sign

正しい：

width:calc(100vh - 60px) <== white space around the minus sign

上記のOPの質問にはこの問題はありませんが、このエラーメッセージへの回答をグーグルで検索しているとき、これが最初に見つかったリソースであるため、この一般的なエラー専用の回答が必要です。

参照：

CSS3 calc（）が最新のChromeでは機能しません

https://www.smashingmagazine.com/2015/12/getting-started-css-calc-techniques/

62
cssyphus

Calc（）を使用する場合ピクセルで除算できない、単位のない数値でのみ除算できます。また、除算する数値には、px、em、vh、vwなどの特定の単位が必要です。

たとえば、要素の幅を設定する必要がある場合は、以下を使用する必要があります。

width: (100px / 2); //this equals to 50px

重要な注意は、必ず演算子記号の間のスペースを置くことです。この calc（）の記事 は、関数の詳細な説明を提供します。

2
Nesha Zoric

スティーブン・トーマスが答えたように、あなたは単位で割ることはできません。これを回避するには、数値を数値として除算し、結果に目的の単位の1単位を掛けて、測定単位を割り当てます。ネストされたシナリオでは、測定単位を把握する必要があります数値を除算して、結果をpxまたはvwの測定単位に割り当てることができるように、最終的には後になりました。

1
Andrew Wasson

1つのSCSS変数がゼロに設定されているため、このエラーに遭遇しました。

違う：

_$card-border-width: 0;
_

これは最終的に、CSSの結果border-radius: 0 0 calc(0.25rem - 0) calc(0.25rem - 0)に対するChromeのメッセージInvalid property valueを引き起こしました。

正しい：

_$card-border-width: 0rem;
_

（border-radius: 0 0 calc(0.25rem - 0rem) calc(0.25rem - 0rem)を与える）

0
bgerth