less がコンパイルされると、css3 の calc が計算されないのはなぜですか?

今回は、less でコンパイルしたときに css3 の calc が計算されない方法を説明します。 以下は実際的なケースです。 フロントエンド担当者にとって、Less または Sass はすでに必須の基本スキルであり、このツールを使用すると、フロントエンド開発者のコ​​ーディング時間を大幅に節約でき、CSS をスムーズに書くことができます。 Less に calc を追加したときにいくつかの問題が見つかりました。 Less でこれを書いたところ、

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

その結果、Less はこれを算術式として処理して実行し、結果は次のように分析されました。当時は落ち込んでいたのですが、どうしてこのような現象が起こったのでしょうか？いろいろ調べた結果、less の計算方法が calc の方法と重なっており、両者が矛盾していることが判明したので、Less の calc の書き方を以下のように書き換えました:

p {width: calc(70%);}

OK、解析結果は正常です:

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

しかし、30px を

変数

に置き換えるにはどうすればよいでしょうか?

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

このように記述した場合、Webstorm はエラーを報告しませんでしたが、grunt-less はエラーを報告しました: C:UserszhongWebstormProjectstest>gruntless

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);
　　}

この書き方だとWebstormではエラーが出ないので、問題ないようにこの書き方を使います。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。 推奨読書:

css3のアニメーションシーケンス

CSSの変なボックスモデルと標準のボックスモデルの使い方

以上がless がコンパイルされると、css3 の calc が計算されないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。