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的方式，能够发挥本身的想象力，编写许多转换函数从而减小重复工做量！

谢谢你们的阅读~但愿能对你们的平常开发工做带来一点帮助~(●´∀｀●)ﾉ夜深了，写完睡觉~