WeChat ミニプログラムで WebStorm で LESS を使用する方法-ミニプログラム開発-php.cn

WeChat ミニプログラムで WebStorm で LESS を使用する方法

不言

リリース： 2018-06-26 16:37:29

オリジナル

2528 人が閲覧しました

この記事では主に、WeChat ミニプログラムでの WebStorm と LESS の使用に関する関連情報を紹介します。必要な友人は参照してください

前提条件

私はフロントエンドに精通しておらず、多くの点で練習が必要です

CSS デモをオンラインで見つけました。WeChat アプレットに挿入すると、実行できます

画像は非常に大きいので、修正しないと読み込みが少し遅くなる可能性があります (詳しくは説明しません)。関係ありません)

環境が少ない

nodejsのnpmの必要性が少ない
nodejs 環境はここでは省略されています
私自身のBaidu

インストールが少ない

スルー

npm install less -g

ログイン後にコピー

(使用していない場合)以前は、Maven ライブラリ、gradle ライブラリ、pods ライブラリとして理解できます)

WebStorm の Less

を使用して、対応する Less を最初に関連付けます

もちろん、対応する wxss ファイルは Webstorm に表示されます

他の記事を参照してください

WebStorm: 発生した問題

ここでは、less ファイルを作成するだけで、対応する wxss ファイルが自動的に生成されます (もちろん、less ファイルを作成して保存した後、wxss ファイルは自動的に更新されるのでとても便利です)

wxssとlessを直接比較

まずはページを見てみましょう

ページはとてもシンプルです

空クラスは1つ、雲クラスは3つだけです

view class="container">
 <view class="sky">
  <view class="clouds_one"> </view >
  <view class="clouds_two"> </view >
  <view class="clouds_three"> </view >
  <view class="clouds_three"></view>
 </view>

</view>

ログイン後にコピー

CSSを見てみる

.sky {
 height: 480px;
 background: #007fd5;
 position: relative;
 overflow: hidden;
 animation: sky_background 50s ease-out infinite;
}
.sky .clouds_one {
 background: url("../../resources/cloud/cloud_one.png");
 position: absolute;
 left: 0;
 top: 0;
 height: 100%;
 width: 300%;
 animation: cloud 50s linear infinite;
 transform: translate3d(0, 0, 0);
}
.sky .clouds_two {
 background: url("../../resources/cloud/cloud_two.png");
 position: absolute;
 left: 0;
 top: 0;
 height: 100%;
 width: 300%;
 animation: cloud 75s linear infinite;
 transform: translate3d(0, 0, 0);
}
.sky .clouds_three {
 background: url("../../resources/cloud/cloud_three.png");
 position: absolute;
 left: 0;
 top: 0;
 height: 100%;
 width: 300%;
 animation: cloud 120s linear infinite;
 transform: translate3d(0, 0, 0);
}
@keyframes cloud {
 0% {
 left: 0;
 }
 100% {
 left: -200%;
 }
}

ログイン後にコピー

繰り返しの箇所が多いことが分かりました

関数は難しくありませんが、容量がかかります70行あり、修正したものを再利用するのは困難です内部のロジックにも依存しますが、Less の使い方も簡単です。保存後はこんな感じです

。

対応するwxssファイルも変更されており、読み取り可能なファイルが直接生成されていることが分かりました

直前に書いたファイルと大きな違いはありません

対応する変数やメソッドも表示されません

@dodo-out-height : 480px; //@dodo-out-height : 480rpx;
@dodo-bg-sky : #007fd5;
@dodo-img-url-clouds_one : "../../resources/cloud/cloud_one.png";
@dodo-img-url-clouds_two : "../../resources/cloud/cloud_two.png";
@dodo-img-url-clouds_three : "../../resources/cloud/cloud_three.png";

.sky {
 height: @dodo-out-height;
 background: @dodo-bg-sky;
 position: relative;
 overflow: hidden;
 animation: sky_background 50s ease-out infinite;
}
.sky .clouds_one {
 .dodo_clouds(@url:@dodo-img-url-clouds_one, @time: 50s)
}
.sky .clouds_two {
 .dodo_clouds(@url:@dodo-img-url-clouds_two, @time: 75s)
}
.sky .clouds_three {
 .dodo_clouds(@url:@dodo-img-url-clouds_three, @time: 120s)
}
.dodo_clouds (@url: @dodo-img-url-clouds_one, @height: 100%, @width: 300%, @time: 100s){
 background: url(@url);
 position: absolute;
 left: 0;
 top: 0;
 height: 100%;
 width: 300%;
 animation: cloud @time linear infinite;
 transform: translate3d(0, 0, 0);
}
@keyframes cloud {
 0% {
 left: 0
 }
 100% {
 left: -200%
 }
}

ログイン後にコピー

プレビュー:

違いはありませんが、コードを書くのがより便利です(マシン構成を描画できるようにすることをお勧めします。開発にはWeChatによって提供されるものを使用しないでください)。アイデア、効率低すぎる)

less は非常に強力です。時間があれば他の場所についても詳しく説明します

less の有用性は再利用性にあると感じています:)

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