LESSをコンパイルするとcss3のcalcが計算されてしまう問題の解決方法

この記事は主に CSS3 の calc がlessコンパイル中にどのように計算されるかについての関連情報を紹介します。内容は非常に優れているので、参考として共有します。

フロントエンド担当者にとって、Less または Sass はすでに必須の基本スキルであり、このツールを使用すると、フロントエンド開発者のコ​​ーディング時間を大幅に節約でき、CSS をスムーズに書くことができます。 Less に calc を追加したときにいくつかの問題が見つかりました。 Less で次のように書きました。

p {width : calc(100% - 30px);}

その結果、Less はこれを算術式として実行し、結果は次のように分析されました。

p {width: calc(70%);}

当時私は落ち込んでいたのですが、どうしてこんなことになるのでしょうか？いろいろ調べた結果、less の計算方法が calc の方法と重なっており、両者が矛盾していることが判明したので、Less の calc の書き方を以下のように書き換えました。

p {width : calc(~"100% - 30px");}

OK、解析結果。通常:

p {width: calc(100% - 30px);}

しかし、30pxを変数に置き換えるにはどうすればよいでしょうか?

　　p {
　　@diff : 30px;
　　width : calc(~"100% - " + @diff);
　　}

Webstorm はエラーを報告しませんでしたが、grunt-less はエラーを報告しました:

C:UserszhongWebstormProjectstest>grunt less

Running "less:development" (less) task

>ParseError: style.less の行 4、列 2 に認識されない入力:

>> 3 @diff : 30px;

>> 4 width : calc(~"100% - " + @diff);

> ;> ; 5 }

警告: style.less のコンパイル中にエラーが発生しました。続行するには --force を使用してください。

警告のため中止されました。

それで私は次のように書きました:

　　p {
　　@diff : 30px;
　　width : calc(~"100% - " @diff);
　　}

構文エラー、コンパイルはできるのですが、ファイルにエラーメッセージが表示され、不満です

長い間探していますが、構文プロンプトエラー設定をデバッグする方法がまだ見つかりません。 Webstorm

そこで、次の書き方に変更しました:

　　p {
　　@diff : 30px;
　　width : calc(~"100% - @{diff}");
　　}

This この書き方はコンパイル可能で、Webstorm ではエラーが報告されないので、この書き方を使用することを好みます。もう問題はなくなります。

以上がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。

関連する推奨事項:

CSS3 のアニメーション属性のトランスフォームとトランジションとアニメーション属性の違いについての分析

高さが不明な画像の垂直方向のセンタリングを設定する方法

の calc() メソッドについてCSS3

以上がLESSをコンパイルするとcss3のcalcが計算されてしまう問題の解決方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。