Vue+Less实现全局字体大中小切换

由于一些原因，公司项目不能使用sass，只好使用less了。在遇到切换全局字体大小这一需求时发现网上基本没有关于less的案例，在看了下less的文档后发现还是主要功能还是有的，可以实现字体大小切换。废话少说

新建minxin.less文件
代码如下：

@import "./variable"; 
.add-size(){
  [data-size="0"] & {
    font-size:@font_size_14;
  }
  [data-size="1"] & {
    font-size:@font_size_15;
  }
  [data-size="2"] & {
    font-size:@font_size_16;
  }
}

新建variable文件

@font_size_14:14px;
@font_size_15:15px;
@font_size_16:16px;

js控制大小代码：
window.document.documentElement.setAttribute(‘data-size‘, size)；//用0,1,2来控制就好

在样式里引用mixin.less
@import “xxx/xxx/mixin”;

.fontSzi{
.add-size();
}