大家好，我是鋒哥，
最近呢，一直再搞微信小程式電商+SpringCloudAlibaba后端+Vue Element，開發小程式端的時候，為了wxss樣式開發方便，我們一般選用less；
Less 是一門 CSS 預處理語言，它擴充了 CSS 語言，增加了諸如變數、混合（mixin）、函式等功能，讓 CSS 更易維護、方便制作主題、擴充，
Less 可以運行在 Node、瀏覽器和 Rhino 平臺上，網上有很多第三方工具幫助你編譯 Less 原始碼，
實體：
@base: #f938ab;
.box-shadow(@style, @c) when (iscolor(@c)) {
-webkit-box-shadow: @style @c;
box-shadow: @style @c;
}
.box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) {
.box-shadow(@style, rgba(0, 0, 0, @alpha));
}
.box {
color: saturate(@base, 5%);
border-color: lighten(@base, 30%);
div { .box-shadow(0 0 5px, 30%) }
}
編譯結果：
.box {
color: #fe33ac;
border-color: #fdcdea;
}
.box div {
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
使用Less，我們開發css會快捷方便很多，
但是很操蛋的事情是，微信開發者工具less不能直接用；
所以我琢磨了半天，查了一些資料，最侄訓是搞定了，記錄下，大伙需要的可以收藏下；
思路是我們下載less插件，然后扔到工具固定的自定義擴展配置上，配置，然后開啟插件，重啟工具即可；
第一步：網上搞了一個less插件包
分享地址：
https://pan.baidu.com/s/1xPxDRWsNgJjx4_aQY3V_eg
提取碼：1234
（假如失效，加鋒哥wx：java1239）
第二步：安裝less插件
打開微信小程式開發工具-選單
設定 -> 擴展設定
解壓less插件壓縮包，扔進去即可：
第三步：配置插件ID
插件包下有一個package.json檔案，打開
拉到最下方：
有一個id值，復制下；
然后 選單 -> 編輯 -> 打開編輯器擴展…
把id號復制進去；
第四步：插件設定
我們需要找到微信開發者工具的一個setting.json組態檔，我在c盤搜索的，我這邊位置如下，大家可以參考找下；
加一個配置：
"less.compile": {
"outExt": ".wxss"
}
同級目錄下，生成的樣式檔案的后綴為wxss
第五步：開啟less插件
打開第二步的編輯器自定義擴展
然后重啟微信開發者工具即可；
第六步：測驗
測驗index.wxml
<!--index.wxml-->
<view class="container">
<view class="userinfo">
less插件測驗
</view>
</view>
新建index.less
.container{
width: 100%;
height: 100%;
.userinfo{
color: red;
}
}
保存index.less檔案，自動編譯生成index.wxss
簡單快捷 666
微信搜一搜公眾號【java1234】關注這個放蕩不羈的程式員，關注后回復【資料】有我準備的一線大廠筆試面試資料以及簡歷模板，
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/321327.html
標籤：其他
上一篇：常量變數的反復橫跳