首頁  >  文章  >  微信小程式  >  微信小程式中用WebStorm使用LESS的方法

微信小程式中用WebStorm使用LESS的方法

不言
不言原創
2018-06-26 16:37:292550瀏覽

這篇文章主要介紹了微信小程式中用WebStorm使用LESS的相關資料,需要的朋友可以參考下

前提

自己前端不熟悉,很多都需要練習

網路上找了一個css的demo, 放到微信小程式後,可以執行

圖片很大,沒有弄,載入可能有點慢(不相關的,就不扯了)

Less環境

Less需要nodejs的npm
nodejs的環境這裡略了
自己百度

透過

npm install less -g

#安裝好less
(沒用過的,可以理解為maven的函式庫,gradle庫,pods的函式庫)

WebStorm的Less使用

先關聯對應的less

##當然,對應的wxss文件,在webstorm中的顯示,


可以參考自己其他文章


WebStorm:遇到的問題

這裡,只要創建less文件,就會自動產生對應的wxss文件了(當然,寫好保存less文件,會自動刷新wxss文件,很方便吧)

直接wxss和less的比較

我們先看下頁面


頁面很簡單


#就只有一個sky 套用3個cloud 類別

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的使用

我們簡單定義變數與方法以後


用less 大體是這樣的

@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%
 }
}

儲存後,


我們發現對應的wxss文件,也改變了,直接產生了可以讀取的文件


和之前直接寫的檔案沒有太大差別


也不會出現對應的變數和方法

#

.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%;
 }
}

##預覽下:

也沒有差別,只是程式碼寫起來更方便(建議機子配置可以的畫,開發別用微信提供的ide,效率太低)

less很強大,其他的地方,有時間再深入,


感覺less好用在於它的複用性:)


以上就是本文的全部內容,希望對大家的學習有幫助,更多相關內容請關注PHP中文網!

相關推薦:

關於微信小程式Redux綁定的解析


#關於微信小程式MD5的方法的解析


以上是微信小程式中用WebStorm使用LESS的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn