這篇文章主要介紹了微信小程式中用WebStorm使用LESS的相關資料,需要的朋友可以參考下
前提
自己前端不熟悉,很多都需要練習
網路上找了一個css的demo, 放到微信小程式後,可以執行
圖片很大,沒有弄,載入可能有點慢(不相關的,就不扯了)
Less環境
Less需要nodejs的npm
nodejs的環境這裡略了
自己百度
透過
npm install less -g
#安裝好less
(沒用過的,可以理解為maven的函式庫,gradle庫,pods的函式庫)
WebStorm的Less使用
先關聯對應的less
##當然,對應的wxss文件,在webstorm中的顯示,直接wxss和less的比較
我們先看下頁面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%; } }我們發現有很多重複的地方
#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% } }儲存後,
#
.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中文網其他相關文章!