Less編寫函式(mixin/@functions)的小技巧分享
開發移動端Web專案的時候，有一種彈性佈局的方案是基於rem開發專案。
簡單來說，應用淘寶lib-flexible （雖說有新方案vw，暫時先不討論）後，會根據視窗寬度大小在document.body 節點計算生成font-size 。然後該頁面的所有節點元素可以使用rem，依據根節點的font-size計算大小
rem作用於非根元素時，相對於根元素字型大小；rem作用於根元素字型大小時，相對於其出初始字型大小 —— MDN
因為，專案中css基於less預處理，所有開始考慮如何設計一個mixin，讓自己不要手動計算設計稿尺寸對應到實際瀏覽器中的rem，而是可以自動計算~
初期方案 -- mixin
通過接收原設計稿畫素尺寸，最後可以計算出相應的rem，mixin簡單如下：
@default-w: 375px;
.convert(@px, @width: @default-w) {
@var: unit(@px / @width) * 10;
@rem: ~'@{var}rem';
}
複製程式碼
使用方式：
<div class="el-mixin"></div> 複製程式碼
.el-mixin {
width: .convert(300px)[@rem];
height: .convert(150px)[@rem];
background: red;
}
複製程式碼
優雅一點 -- @functions
當然同學們也發現了。.convert(250px)[@rem]
這種方式略顯冗長，還需要屬性取值，於是我想起很久以前我用Scss開發的時候，可以很方便編寫自定義轉換函式（這裡不展開），可比這種方式更簡潔！那麼Less有沒有提供函式編寫呢？
答案是有的！可以在Less中編寫Javascript函式
首先需要在Webpack中對less-loader設定javascriptEnabled
，使其支援編寫Javascript！
// module.rules
...
{
test: /\.less/,
exclude: /node_modules/,
use: ['style-loader', 'css-loader', {
loader: 'less-loader',
options: {
javascriptEnabled: true
}
}],
}
...
複製程式碼
然後就可以開始編寫自己的Javascript函式啦！
.remMixin() {
@functions: ~`(function() {
var clientWidth = '375px';
function convert(size) {
return typeof size === 'string' ?
+size.replace('px', '') : size;
}
this.rem = function(size) {
return convert(size) / convert(clientWidth) * 10 + 'rem';
}
})()`;
}
.remMixin();
複製程式碼
使用方式如下（因為寫了convert函式，可以傳數值或字串都行）：
.el-function {
width: ~`rem("300px")`;
height: ~`rem(150)`;
background: blue;
}
複製程式碼
建議大家點選rem兩種方案mixin/function示例效果 看看哦~
這種寫法毋庸置疑的更加簡潔了。而且在less中引入編寫原生Javascript的方式，可以發揮自己的想象力，編寫許多轉換函式從而減少重複工作量！
謝謝大家的閱讀~希望能對大家的日常開發工作帶來一點幫助~(●´∀｀●)ﾉ夜深了，寫完睡覺~