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的方式，能夠發揮本身的想象力，編寫許多轉換函數從而減小重複工做量！

謝謝你們的閱讀~但願能對你們的平常開發工做帶來一點幫助~(●´∀｀●)ﾉ夜深了，寫完睡覺~