微信小程序中用WebStorm使用LESS

2019-11-19 17:14:17

字體：大中小

來源：轉(zhuǎn)載

供稿：網(wǎng)友

前提

自己前端不熟悉，很多都需要練習(xí)

網(wǎng)上找了一個css的demo，放到微信小程序后，可以運行

圖片很大，沒有弄，加載可能有點慢（不相關(guān)的，就不扯了）

Less環(huán)境

Less需要nodejs的npm
nodejs的環(huán)境這里略了
自己百度

通過

npm install less -g

安裝好 less
（沒有用過的，可以理解為 maven的庫， gradle庫，pods的庫）

WebStorm的Less使用

先關(guān)聯(lián)對應(yīng)的less

當(dāng)然，對應(yīng)的wxss文件，在webstorm中的顯示，

可以參考自己其他文章

WebStorm：遇到的問題

這里，只要創(chuàng)建less文件，就會自動生成對應(yīng)的wxss文件了（當(dāng)然，寫好保存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%; }}

我們發(fā)現(xiàn)有很多重復(fù)的地方

功能不難，但是占了70行，并且很難復(fù)用

修改的畫，還要看里面的邏輯

修改也不方便

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

保存后，

我們發(fā)現(xiàn)對應(yīng)的wxss文件，也改變了，直接生成了可以讀取的文件

和之前直接寫的文件沒有太大區(qū)別

也不會出現(xiàn)對應(yīng)的變量和方法

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

預(yù)覽下：