lessをコンパイルするとcss3のcalcが計算されてしまう場合の解決方法は？

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

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

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

div {width: calc(70%);}

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

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

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

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

このように書くと、Webstorm はエラーを報告しませんでしたが、grunt-less はエラーを報告しました:

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

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

C:\Users\zhong\WebstormProjects\test>grunt less
Running "less:development" (less) task
>> ParseError: Unrecognised input in style.less on line 4, column 2:
>> 3    @diff : 30px;
>> 4    width : calc(~"100% - " + @diff);
>> 5 }
Warning: Error compiling style.less Use --force to continue.
Aborted due to warnings.

コンパイルは成功しましたが、Webstorm は常に

構文エラー

を要求します。コンパイルできるのですが、ファイルを見ると何か問題があります。長い間探しましたが、Webstorm の構文プロンプトのエラー設定をデバッグする方法が見つからなかったので、変更しました。

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

この書き方はコンパイルできて、Webstormでもエラーが報告されないので比較してみましたが、私はこの書き方が好きなので、もう問題ないでしょう。 これらの事例を読んだ後は、その方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイト

その他の

関連記事に注目してください。

関連記事:

HTML5 で円のアニメーション効果を作成する方法

h5 で携帯電話にページ スケーリングを実装する方法

HTML5

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