微信小程序中用WebStorm使用LESS

更新時(shí)間：2017年03月08日 17:14:28 作者：dodo_lihao

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

前提

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

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

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

Less環(huán)境

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

通過(guò)

npm install less -g

安裝好 less
（沒(méi)有用過(guò)的，可以理解為 maven的庫(kù)， gradle庫(kù)，pods的庫(kù)）

WebStorm的Less使用

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

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

可以參考自己其他文章

WebStorm：遇到的問(wèn)題

這里，只要?jiǎng)?chuàng)建less文件，就會(huì)自動(dòng)生成對(duì)應(yīng)的wxss文件了（當(dāng)然，寫(xiě)好保存less文件，會(huì)自動(dòng)刷新wxss文件，很方便吧）

直接wxss和 less的比較

我們先看下頁(yè)面

頁(yè)面很簡(jiǎn)單

就只有一個(gè) sky 套用 3個(gè)cloud 類(lèi)

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ù)用

修改的畫(huà)，還要看里面的邏輯

修改也不方便

Less的使用

我們簡(jiǎn)單定義變量和方法以后

用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)對(duì)應(yīng)的wxss文件，也改變了，直接生成了可以讀取的文件

和之前直接寫(xiě)的文件沒(méi)有太大區(qū)別

也不會(huì)出現(xiàn)對(duì)應(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ù)覽下：