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

不言
リリース: 2018-06-26 14:53:19
オリジナル
1762 人が閲覧しました

この記事は主に 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 サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート